Question

我已逐渐将我的应用程序从直接MVC4迁移到使用更多ajax和动态加载的部分视图。我喜欢它，但在这个过程中我的javascript和事件管理变得有点不合理，所以我试图让它更有条理和可维护。我一直在努力的事情之一是加载dom中不存在的元素的事件。

使用此线程中描述的委托事件： how-should-javascript-in-an-ajax-loaded-partial-view-be-handled 看起来它会帮助我很多，但我无法让它工作。

我在主页加载时有以下内容（不是局部视图）。在此示例中，#maincontainer存在于页面加载和整个应用程序执行期间。稍后通过局部视图加载“.panetitle”。当它可见时，devtools中的$（“＃maincontainer .panetitle”）定位很好。没有涉及#maincontainer

的其他事件处理

$(document).ready(function () {
    $('#maincontainer').on('click', '.panetitle', function () {
        console.log('clicked');           
    });
});

我对这种形式的.on（）的理解是，在加载页面时，＃maincontainer需要存在，但该事件应该在#maincontainer的'.panetitle'后代出现，无论它们将来出现。 1）我的理解是否正确？ 2）我正确使用它吗？ 3）有什么建议吗？ :)

一如既往，谢谢。乔尔

Answer 1

根据您的描述，您似乎正确使用它。以下是一些要检查的事项：

#maincontainer必须存在。
#maincontainer必须是.panetitle的父级。
#maincontainer。
.panetitle及其父母必须允许事件传播，因此没有中间事件处理程序可以阻止事件传播达#maincontainer。
.panetitle本身必须接收click事件，以便它可以传播它（点击不会被阻止或被任何其他对象占用）。
.panetitle对象在点击时必须具有该类名称。

您可以通过尝试将此作为调试步骤来检查1,2或3是否存在问题（通常不建议将所有委派事件放在文档上，因为它们应尽可能靠近动态对象放置在大型应用程序中获得更好的性能）：

$(document).ready(function () {
    $(document).on('click', '.panetitle', function () {
        console.log('clicked');           
    });
});

如果那也不起作用，那么它可能是4,5或6或者其他我们尚未想到的东西。您可以尝试将其作为调试步骤：

$(document).ready(function () {
    $(document).on('click', function (e) {
        var t = e.target;
        console.log('click: tag = ' + t.tagName + ", class = " + t.className);           
    });
});

安装此调试处理程序后，单击.panetitle对象，查看您在该调试控制台中看到的内容。你有任何点击事件吗？它是针对不同的对象吗？即使那时你没有得到任何点击事件，那么必须阻止传播。如果您正在接收该活动，但是对于其他对象，则必须在.panetitle之上。

Answer 2

试试这个：

$(document).ready(function () {
    $(document).on('click', '.panetitle', function () {
        console.log('clicked');           
    });
});

jquery .on（）委托事件处理不适用于通过部分视图加载的元素

2 个答案: