元素不會對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; 
       } 
      }); 

的問題是：點擊標籤上檢查輸入的元素，但驗證事件觸發後，才第二次點擊。

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 
}); 

此外，.bind在較新版本的jquery中折舊。如果您在使用jQuery 1.7+，使用此：

$("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()真的不應該導致無線電的價值發生變化。