Элемент не реагирует на событие 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

Я нашел обходной путь (или, возможно, правильный способ вызвать события проверки)! Хитрость заключается в том, чтобы привязать событие «change» к флажкам и переключателю, например:

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

Эта привязка должна быть установлена ​​перед любой другой привязкой события "change", чтобы каждое событие "change" вызывало проверку проверки.

Answer 2

Вам не нужен идентификатор входа, если тег привязки всегда находится после ввода. Попробуйте это:

$("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() действительно не должно вызывать изменение значения радио.