jQueryイベントで要素が反応しない

Question

Validation Pluginによって検証された質問フォームがあります。チェックボックスとラジオボタンのあるフィールドがたくさんありますが、href = "＃checkbox-id"のリンクをクリックしてチェックして欲しいです。

... 
<label class="answer-label" for="answer-2"> 
    <input id="option-2.1" class="answer" type="radio" name="answer-2" value="Yes"/> 
    <a href="#option-2.1">Yes</a> 
</label> 
... 

Javascriptを：ここで

$("label.answer-label a").bind("click", function(event) { 
    event.preventDefault(); 
    var target = $(this).attr("href").replace(".", "\\."); 
    $(target).click(); 
}); 

が検証プラグインの設定です：ラベルにクリックすると、入力要素をチェックしますが、検証イベントは後にのみ発動：

$("form#feedback") 
    .validate({ submitHandler : function (form) { 
       form.submit(); 
       }, 
       errorClass: "invalid", 
       focusInvalid : false, 
       debug : true, 
       invalidHandler : function (form, validator) { 
        var destination = validator.errorList[0].element; 

        $("html, body").animate({ scrollTop : $(destination).offset().top - 100 }); 
        $(destination).focus(); 
       }, 
       highlight : function (element, errorClass, validClass) { 
        if ($(element).parents(".name-company")) { 
         $(element) 
          .removeClass(validClass) 
          .addClass(errorClass); 
        } 
        // if ($(element).parents(".question")) { 
        $(element) 
         .parents(".question") 
         .removeClass(validClass) 
         .addClass(errorClass); 
        // } 
       }, 
       unhighlight : function (element, errorClass, validClass) { 
        if ($(element).parents(".name-company")) { 
         $(element) 
          .removeClass(errorClass) 
          .addClass(validClass); 
        } 
        // if ($(element).parents(".question")) { 
        $(element) 
         .parents(".question") 
         .removeClass(errorClass) 
         .addClass(validClass); 
        // } 
       }, 
       errorPlacement : function() { 
        return false; 
       } 
      }); 

問題があります2回目のクリック。

Answer 1

回避策が見つかった（または、おそらく、検証イベントをトリガする正しい方法）。トリックはこのように、チェックボックスやラジオボタンの「変更」イベントをバインドすることです：

$("#feedback input[type=radio], #feedback input[type=checkbox]") 
     .bind("change", function (event) { 
       $("#feedback").validate().element($(this)); 
      }); 

このすべての「変更」イベントがトリガされるように、結合、他の「変更」イベントの前に設定する必要がありますバインディング検証チェック。

Answer 2

アンカータグが常に入力の後にある場合、入力のIDは必要ありません。これを試してください：

$("label.answer-label a").bind("click", function(event) { 
    event.preventDefault(); 
    $(this).prev().click().blur(); // or change 
}); 

さらに、新しいバージョンのjqueryでは.bindが償却されます。

$("label.answer-label a").on("click", function(event) { 
    event.preventDefault(); 
    $(this).prev().click().blur(); // or change 
}); 

さらに、要素が動的な場合は、イベント委譲を使用する必要があります。

$(document).on("click", "label.answer-label a",function(event) { 
    event.preventDefault(); 
    $(this).prev().click().blur(); // or change 
}); 

検証をトリガするには、クリック後に.blur()を追加しました。検証コードに応じて.change（）に変更する必要があるかもしれません。

.click()を削除しても、それでも反応しますか？ .click()は本当にラジオの値を変えるべきではありません。