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”函数，它将事件绑定到未来创建的DOM元素。

Answer 2

FWIW，JQuery bug跟踪器上有关于fadeTo / fadeOut错误的门票。

Answer 3

有几种方法可以做到这一点。一，可以在插入元素后将单击处理程序附加到元素：

$("#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”id的元素都会在创建时获得点击处理程序。

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

如何将事件绑定到附加元素？

3 个答案: