javascript - jQuery 向右滑动 - 并替换 HTML

Question

原始 HTML:

<div id="filler">
    <h2 class="rankings-header">Donor Rankings <img src="<?php bloginfo('stylesheet_directory'); ?>/img/right_arrow.png" style="right:0; padding-left:10px; cursor:pointer;" id="dr_collapse"></h2>
</div>

JQuery:

jQuery(document).ready(function($){ 
        $("#dr_collapse").click(function(){
            $("#rankings-list").toggle("slide",{direction:"right"},700);
            $("#filler" ).html( '<h2 class="rankings-header">Donor Rankings <img src="/wp-content/themes/ati/img/left_arrow.png" style="right:0; padding-left:10px; cursor:pointer;" id="dr_collapse"></h2>' );
        });
});

出于某种原因，当我单击图像时，幻灯片会发生...一次。它改变了箭头图像。我可以检查 html 并查看更改后的 html。

但是当我再次点击它时，没有任何反应，也没有抛出 JS 错误

有什么想法吗？

Answer 1

这是因为您要替换 #filler 中的 html，因此会重新创建 DOM 元素 #dr_collapse，从而丢失其点击事件。

使用事件绑定(bind)器 .on()，而不是 $().click()，其方式不依赖于内部 DOM 元素:

jQuery(document).ready(function($){ 
    $("body").on("click", "#dr_collapse", function(){
        $("#rankings-list").toggle("slide",{direction:"right"},700);
        $("#filler" ).html( '<h2 class="rankings-header">Donor Rankings <img src="/wp-content/themes/ati/img/left_arrow.png" style="right:0; padding-left:10px; cursor:pointer;"     id="dr_collapse"></h2>' );
    });
});

Jquery's .on() docs