Question

我有一个链接可以将动态内容加载到div中...在新加载的动态内容中需要大量额外的ajax操作。我是否必须为成功处理程序中的每个操作创建新的委托功能？（委托函数，理想情况下属于成功处理程序吗？）如何合并这些函数？

例如，我点击主屏幕上的“查看帖子”按钮。它将一堆帖子加载到模态窗口中。例如，在该窗口中，每个帖子可能有一个“视图注释”按钮，它会自己调用ajax并将注释直接加载到模态窗口中。

我想澄清的两件事是组织这些委托功能的最佳实践。其次，何时需要代表/何时不需要？

编辑：谢谢你们。这些都是很好的答案。我将选择Ohgodwhy的答案，因为他只有245名代表。

Answer 1

对jQuery文档中的jQuery委托函数有很好的参考，该文档位于 - ＆gt; http://api.jquery.com/delegate/

委托监视“父”，并应用一个允许对所有子元素进行回调的函数，无论它们是否是动态的。

$("table").delegate("td", "click", function(){
  //All actions to be performed regardless if dynamic or not.
});

值得注意的是，委托功能已被jQuery 1.7中的.on函数取代。您可以使用.on功能监视所有DOM更改，该功能也是.live功能的替代。

监视并确保函数绑定到DOM加载时/之后添加的所有元素的正确语法是 - ＆gt;

$("table").on("click", "td", function(){
  //perform actions here for the click functions 
});

修改

如果你想用一个“george”类来定位所有标签，并确保这些函数在当前所有的标签上运行，并且将来会被加载，那么你会这样做

$(".modal_overlay").on("click", ".george", function(){ alert('I have a class of George'); //every item with a class of george when clicked will alert this. });

这应该是有道理的。

Answer 2

这个想法是永远委托一个静态的父。因此，无论您拥有多少嵌套动态元素，如果您的容器是<article>，您可以执行以下操作：

$('article').on('click', '.view-comments', function(){
    // Something
});

.view-comments内的所有<article>按钮和未来的按钮都会有click()个事件，无论深度如何。

Answer 3

这一切都与事件冒泡有关。请考虑以下HTML结构：

<body>
    <div>
        <p>
            Here's a 
            <a>link</a>
            and
            <a>another</a>
        </p>
    </div>
</body>

如果您点击“其他”链接，您实际上也会点击<a>，<p>，<div>和<body>标签因为它们彼此嵌套。这是.delegate利用简单动态添加内容的事件。假设您将委托事件附加到<div>元素：

$('div').delegate('a', 'click', doSomething);

这意味着当点击事件冒泡到div时，它将检查相同的点击事件是否在其自身内部冒充<a>元素，如果是，则运行处理程序。这里的好处显然是这个div的内容可以是动态的，并且可以在添加委托后修改，因为仅在事件被触发时才检查选择器。

不确定我是否完全理解jQuery委托

3 个答案: