在 dom 更改后处理东西

Handle stuff after dom changes

本文关键字：后处理 dom      更新时间：2023-09-26

我有一个页面，里面有一些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(在这种情况下，是否建议始终指向"身体"？它总是在那里，但对于可能的性能问题？

所以我的第一个问题是，为什么这有效，只是 click(( 功能不是吗？

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

关于事件委托的古老文章供您阅读 - 但概念保持不变：

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

第二个问题，为什么非要指向"身体">

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

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

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

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

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

因为你已经把click()事件指向了身体。 然后，JQuery 检查单击的目标是否与任何事件处理程序(如您创建的事件处理程序(匹配，与单击的元素匹配。 这样，任何新元素都将使事件与它们"关联"。

由于工具提示不是可以放置在正文上的事件，因此需要在创建元素时重新初始化它。

编辑：

对于你的第四个问题，是不是要看情况。 绑定到主体的优点是不会意外地将事件多次绑定到元素。 缺点是要添加需要检查每个事件的事件处理程序，这可能会导致性能问题。

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

事件绑定到要绑定到的特定对象。

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

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

现在，$('body').on('click','.click', func)实际上是将点击事件绑定到 body 标签(:P应该始终存在(，但发生的情况是它捕获点击事件是否通过目标 css 选择器的元素(在这种情况下.click(，因此由于检查是动态完成的，因此将捕获新元素。

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

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

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