javascript - 如何将事件绑定(bind)到附加元素？

Question

我尝试使用 jquery 效果 fadeTo 显示错误消息，并尝试通过附加按钮和使用淡出来隐藏消息，但似乎不起作用。

我所做的是:

$("#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 ”函数，也可以将事件绑定(bind)到将来创建的 DOM 元素。