另一种更好的（？）方式：

Question

我有以下jquery

$(document).ready(function () {
    var cheader = document.getElementsByClassName("centralheader");
    var cmain = document.getElementsByClassName("centralmain");
    var eheader = document.getElementsByClassName("esbheader");
    var emain = document.getElementsByClassName("esbmain");
    var lheader = document.getElementsByClassName("LMheader");
    var lmain = document.getElementsByClassName("LMmain");
    var pheader = document.getElementsByClassName("promoheader");
    var pmain = document.getElementsByClassName("promomain");

    $(cheader).click(function () {
        $(cmain).toggle("slow");
    });
    $(eheader).click(function () {
        $(emain).toggle("slow");
    });
    $(lheader).click(function () {
        $(lmain).toggle("slow");
    });
    $(pheader).click(function () {
        $(pmain).toggle("slow");
    });
});

我正在使用DevExpress控件，因此它是ASPxCallbackPanel。我的第一个问题是引用我的div，因为它们包含在ASPxCallbackPanel中，因此我遇到了一个能够找到它们的问题。现在看来，当第一次加载页面时，JQuery工作正常，但只要回调完成，JQuery就无法正常工作。一旦回调完成并且我点击div - cheader（例如），它将不会注册点击并且不会切换div - cmain。

Answer 1

由于内容是动态的，使用附加到不变的祖先元素的委托事件处理程序（document是最好的默认值，如果没有其他更接近/方便的话）。

这可以通过将单个事件连接到祖先（例如document），然后监听事件（点击）来冒泡到它。然后将jQuery选择器应用于事件时间的bubble-chain 中的元素。它仅将回调应用于导致事件的匹配元素。

这样做的结果是元素只需要在点击发生时匹配选择器，而不是在事件被注册时匹配。

e.g。

$(function () { $(document).on('click', '.centralheader', function () { $(".centralmain").toggle("slow"); }); $(document).on('click', '.esbheader', function () { $('.esbmain').toggle("slow"); }); $(document).on('click', '.LMheader', function () { $('.LMmain').toggle("slow"); }); $(document).on('click', '.promoheader', function () { $('.promomain').toggle("slow"); }); });

说明：

在您的示例中，无需使用document.getElementsByClassName预取元素，因为jQuery以更简单的方式执行此操作。

$(function () {是$(document).ready(function(){
的便捷快捷方式
document始终存在的代码实际上不需要DOM就绪处理程序。

由于jQuery可以链接元素/函数，您可以将其缩短为：

链接版本：

$(function () { $(document).on('click', '.centralheader', function () { $(".centralmain").toggle("slow"); }).on('click', '.esbheader', function () { $('.esbmain').toggle("slow"); }).on('click', '.LMheader', function () { $('.LMmain').toggle("slow"); }).on('click', '.promoheader', function () { $('.promomain').toggle("slow"); }); });

另一种更好的（？）方式：

更好的选择（恕我直言）是data-驱动任何这样的场景。

它涉及在要单击的元素上有一个公共类（例如header），并且您单击的元素包含对您要修改的项的引用（例如，带有data-属性的<div class="header" data-target=".centralmain">Central header</div> <div class="header" data-target=".centralmain">ESB header</div> <div class="header" data-target=".centralmain">LM header</div> <div class="header" data-target=".promomain">Promo header</div>属性jQuery选择器）。

e.g。

$(document).on('click', '.header', function(){ var $this = $(this); var target = $this.data("target"); $(target).toggle('slow'); });

然后代码变得如此简单（首先是可读性的长版本）：

$(document).on('click', '.header', function(){ $($(this).data("target")).toggle('slow'); });

这压缩了这个小片段：

<html> <...> <body> <div index="1"> <div index="1.1"> <h2 index = "1.1.1">some text1</h2> <h2 index = "1.1.2">some text</h2> </div> </div> <div index="2"> <table index="2.1"> <tr index="2.1.1"> <td index="2.1.1.1">some cell</td> <td> index = "2.1.1.2">some cell</td> </tr> <tr index="2.1.2"> <td index="2.1.2.1">some cell</td> </tr> </table> </div> <div index="3"> <h1 index="3.1">some text</h1> </div> </body> </html>

执行回调后，Jquery不起作用

1 个答案:

说明：

另一种更好的（？）方式：