Question

将新的html插入DOM后，我需要添加一些监听器。

但新元素不能立即使用。

我的代码：

$('#loader').clone().removeAttr('id').load("Views/chatBox.html").appendTo('body');
$('#chat')
    .focus(function() {
        $(this).addClass('jV');
    })
    .blur(function() {
        $('#chat').removeClass('jV');
    });

哪个不起作用。

使用live（）仍然无效：

$('#chat').live('focus',function() {
    $('#chat').addClass('jV');
})
.live('blur',function() {
    $('#chat').removeClass('jV');
});

Answer 1

请改用jQuery.live()。 live()将在创建元素时绑定事件处理程序。它需要jQuery 1.3 +。

编辑：看起来聊天div可能尚未加载，所以这仍然是个问题。我建议你稍微改变你的计划。首先，在您的文档中有一个所有聊天区域：

<div id="chat"></div>

然后你有：

$(function() {
  $("#chat div.chat").live("focus", function() {
    $(this).addClass("jV");
  }).live("blur", function() {
    $(this).removeClass("jV");
  });
});

这里的不同之处在于，您正在向聊天区域（具有聊天ID）添加带有聊天类别的div。然后你只需：

$('#loader').clone().removeAttr('id').load("Views/chatBox.html").appendTo('#chat');

Answer 2

如果要将侦听器添加到动态创建的新HTML / DOM元素中的元素，则只需将事件附加到使用任何适当的jQuery事件处理程序创建它们时创建的元素。 / p>

如果外部加载的内容存在问题（如脚本/图像），请对这些元素使用.load（）jQuery事件处理程序，以检测它们何时在DOM中可用并且可以进行操作。

正如另一张海报所提到的，.live（）也有效，但如果您自己控制元素创建则可能不需要 - .live（）会增加一些可能过度的开销。

Answer 3

如果#chat位于您正在加载的chatBox.html中，那么您可以利用该加载的回调：

$('#loader').clone().removeAttr('id').load("Views/chatBox.html",function(){
    $('#chat').focus(function() {
        $(this).addClass('jV');
    })
    .blur(function() {
        $('#chat').removeClass('jV');
    });
}).appendTo('body');

http://docs.jquery.com/Ajax/load#urldatacallback

Answer 4

Livequery会做你想要的。它会

“绑定事件或触发回调匹配元素自动神奇，甚至页面加载后和 DOM更新了。“

jQuery中是否有onAvailable（）函数？

4 个答案: