Как я могу привязать события к добавленному элементу?

Question

Я попытался показать сообщение об ошибке, используя эффект jquery fadeTo, и попытался скрыть сообщение, добавив кнопку и используя fadeout, но, похоже, не работает.

То, что я сделал, было:

$("#sub_error")
  .fadeTo(200, 0.1, function()
  {
    $("#sub_error")
      .html(error.join("<br/><br/>"))
      .append('<br/><input type="button" name="err_ok" id="err_ok" value="ok">')
      .addClass('subboxerror')
      .fadeTo(900,1);
  });

$("#err_ok").click(function() 
{
  $("#sub_error").fadeOut("slow");
});

Что я делаю не так, может кто-нибудь мне помочь?

Answer 1

элемент #err_ok сначала не существует, поэтому обработчик .click () к нему не применяется.

Вы можете решить это, поставив

$("#err_ok").click(function () {
  $("#sub_error").fadeOut("slow");
});

в функции и вызов функции после создания элемента в DOM.

Редактировать: это должно быть полное решение:

$("#sub_error").fadeTo(200, 0.1, function() {
    $("#sub_error")
      .html(error.join("<br/><br/>"))
      .append('<br/><input type="button" name="err_ok" id="err_ok" value="ok">')
      .addClass('subboxerror')
      .fadeTo(900, 1);
    bindEvents();
});

function bindEvents() {
    $("#err_ok").click(function() {
        $("#sub_error").fadeOut("slow");
    });
}

Существует также функция " live ", которая также связывает события с будущими созданными элементами DOM.

Answer 2

Есть несколько способов сделать это. Во-первых, вы можете добавить обработчик щелчка к элементу после его вставки:

$("#sub_error").fadeTo(200, 0.1, function() {
    $("#sub_error")
      .html(error.join("<br/><br/>"))
      .append('<br/><input type="button" name="err_ok" id="err_ok" value="ok">')
      .addClass('subboxerror')
      .fadeTo(900, 1)
      .find('#err_ok')
      .click( function() {
        $("#sub_error").fadeOut("slow");
      });
});

Или два, вы можете использовать живой обработчик событий, чтобы любой элемент с идентификатором "err_ok" получал обработчик нажатия при каждом его создании.

$('#err_ok').live('click', function() {
    $('#sub_error').fadeOut('slow');
});

Answer 3

FWIW, на трекер ошибок JQuery поданы заявки о багах fadeTo / fadeOut.