Question

我有一个包含一些Javascript / jQuery内容的页面，例如：

(function()
{
    $('.tip').tooltip();

    $('.test').click(function()
    {
        alert('Clicked!')
    });
}();

在页面上，我使用jQuery插入一些HTML，以便更改DOM。例如，我插入了一个带有“tip”或“test”类的额外元素。新的插入元素不起作用，因为jQuery正在使用非操作的DOM，而刚刚插入的元素不存在。所以我一直在寻找并点击这个“点击”的解决方案：

$('body').on('click','.click',function()
{
    alert('Clicked!')
});

我不明白为什么，但这样一来，它正在使用被操纵的DOM，jQuery的东西适用于新插入的元素。所以我的第一个问题是，为什么这个工作只有click（）函数没有？第二个问题，为什么我必须指向“身体”？

最后，我的第三个问题是，如何使用工具提示完成此操作？

我知道有很多关于这个主题的信息（之前我读过的委托（）和live（）函数）但是我找不到关于它的解释。而且我无法用我找到的信息解决我的第三个问题。

我期待你的回复！

额外问题：

4）对于这种情况，是否建议始终指向“身体”？它始终存在，但可能存在性能问题？

Answer 1

所以我的第一个问题是，为什么这样做而且只是点击（）功能不是吗？

因为事件处理程序现在被委托给父元素，所以在替换/操作子元素之后它仍然存在。

关于事件授权的古代文章供你细读 - 但概念保持不变：

http://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/

第二个问题，为什么我必须指向＆＃34; body＆＃34;

你不会，任何合适的父元素都可以。例如，任何 not 的直接父级（例如div包装器）都会被替换。

最后，我的第三个问题是，如何使用工具提示完成此操作？

您需要在新插入的元素上重新初始化工具提示插件。例如：

$.get("foo.html", function (html) {
    $("#someDiv").html(html);
    $("#someDiv").find(".tip").tooltip();
});

Answer 2

当您操作DOM时，click()事件不起作用，因为JQuery不会监视DOM更改。绑定click()事件时，它会选择当时页面上的元素。除非您明确绑定事件，否则新的不在列表中。

因为您已将click()事件指向身体。然后，JQuery检查点击目标是否与任何事件处理程序匹配（如您创建的内容）与单击的元素匹配。这样，任何新元素都会使事件与它们“关联”。

因为工具提示不是可以放在身体上的事件，所以在创建元素时需要重新初始化它。

修改

对于你的第四个问题，这取决于。绑定到正文的优点是您不会意外地将事件多次绑定到元素。缺点是您要添加需要在每个事件上进行检查的事件处理程序，这可能会导致性能问题。

至于您对DRY的担忧，请将工具提示的初始化放入函数中，并在添加它时调用它。试图避免使用相同的函数调用在这方面有点矫枉过正，IMO。

Answer 3

事件绑定到您绑定它的特定对象。

像$('.tip').tooltip()之类的东西会在$('.tip')上执行tooltip（）功能，它实际上只是满足css选择器.tip的对象集合。你应该注意的是，该集合不是动态的，它基本上是当前页面的“数据库”查询，并返回由jQuery包装的HTML DOM对象的结果集。

因此，对该集合调用tooptip（）只会对该集合中的对象执行工具提示功能，调用工具提示时不在该集合中的任何内容都不具备工具提示功能。因此，在<{em> .tip调用之后添加满足tooltip()选择器的元素将不会为其提供工具提示功能。

现在，$('body').on('click','.click', func)实际上是将click事件绑定到body标记（应始终存在：P），但会发生什么呢？它会捕获click事件是否已通过目标元素css选择器（在这种情况下为.click），因此，由于检查是动态完成的，因此将捕获新元素。

这是对正在发生的事情的一个相对简短的总结......我希望它有所帮助

<强>更新工具提示的最佳方法是在添加元素后绑定工具提示，例如：

$('#container').load('www.example.com/stuff', function() { $('.tip', $(this)).tooltip(); });

在dom改变后处理东西

3 个答案: