jquery委托如何触发内容加载？答案

【问题标题】：jquery delegate how to trigger on load of content?jquery委托如何触发内容加载？
【发布时间】：2023-03-29 11:22:01
【问题描述】：

当页面呈现时，我需要通过 jQuery 设置一些 HTML。例如，我可能有这个：

<ol>
    <li>
        <div class="theDiv"></div>
        <a class="theLink"...>...</a>
    <li>
<ol>

有时我需要隐藏 div。有时我需要将点击事件应用于锚标记。所以我可能有这个：

$('li').hide();
$('a').click(function(){...});

效果很好。

但是，我们现在正在将其他 LI 加载到此列表中。不幸的是，我们没有用 jQuery 来做这件事。我可以将上述内容包装在一个函数中，该函数可以在 ajax 加载后调用以重新渲染所有内容。但是有没有更好的方法？

我认为live() 会是解决方案，但我发现delegate() 现在通过文档成为首选。

无论哪种方式，两者似乎都只允许您绑定事件（单击、悬停等），而不是在将新 HTML 添加到 DOM 后简单地重新渲染。

有没有办法通过delegate() 做到这一点？有没有更合适的处理方式？

更新：

也许有一个更简单的方法来问这个问题：要让 JS 在 AJAX 更新后对 DOM 进行操作，是否必须通过 AJAX 调用本身（通常通过回调函数）触发它，或者是否有 jQuery 方法来'观察' DOM 更新并相应地触发？

【问题讨论】：

【解决方案1】：

我认为最新的 jquery API 调用是 jQuery.on 文档页面上的第二个示例似乎完全适合您的情况。

【讨论】：

是的，这个：on();是你想要使用的。我的问题是 jQuery 是否可以识别由 jQuery 之外的 js 所做的 DOM 更改。我是这么想的，但我想我不知道。

【解决方案2】：

将要执行的代码放入 AJAX 调用的 success 回调中。确保只在新元素上运行代码，除非代码在同一元素上多次运行时不会破坏任何内容。

【讨论】：

是的，这似乎是解决方案。不幸的是，没有一个 AJAX 是通过 jQuery 完成的，所以我们不能通过它缓存/传递任何 jQuery 对象，这只会让事情变得有点混乱。
那么你可能应该重构你的一些代码。但是，您可以简单地使用 $(some_dom_element) 将本机 DOM 对象包装在 jQuery 对象中。要测试代码是否已经执行，您可以向其中添加一些类，然后使用例如像这样的代码：var elements = $('.myDynamicElement:not(.alreadyHandled)').addClass('alreadyHandled');
jQuery on() 应该适用于对 DOM 的任何更改，即使在 jQuery 之外制作了 y javascript，我认为。如果我错了，请有人纠正我。 @Jason 的答案是我要开始的地方。
@John ~ .on() 可以被定义为.delegate()，它可以与click 事件挂钩一起使用，但不能以编程方式触发li 上的.hide() 调用。我认为@ThiefMaster 可以更好地完整回答这个问题。

【解决方案3】：

解决方案是创建一个利用 jQuery 并从内部调用的 javascript 函数无论你有什么 javascript 正在执行 ajax。

注意：阅读后它看起来 live on() 仅适用于点击和悬停等事件。

function updateMyStuff() {
    $('li').hide();
    $('a').click(function(){...});
}

...

function myCrazyNonJqueryAjaxWhy?() {
    updateMyStuff();
}

【讨论】：