0

将新的 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');
});
4

4 回答 4

2

改为使用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");
  });
});

这里的不同之处在于，您将带有聊天类的 div 添加到聊天区域（具有聊天 id）。然后，您只需执行以下操作：

$('#loader').clone().removeAttr('id').load("Views/chatBox.html").appendTo('#chat');
于 2009-09-07T03:18:49.883 回答
0

如果您正在向作为动态创建的新 HTML/DOM 元素的一部分的元素添加侦听器，您可以将事件附加到使用任何适当的 jQuery 事件处理程序创建它们时创建的那些元素。

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

正如另一张海报所提到的， .live() 也可以工作，但如果您可以自己控制元素创建，则可能不需要 - .live() 增加了一些开销，这可能是多余的。

于 2009-09-07T03:23:11.867 回答
0

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

$('#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

于 2009-09-07T03:49:51.633 回答
0

Livequery会做你想做的事。它会

“自动为匹配的元素绑定事件或触发回调，即使在页面加载和 DOM 更新之后也是如此。”

于 2009-09-07T03:53:43.473 回答