Question

这是我的html结构

<div class="hide_chk">+ Show Table</div>
<table border="1" class="leads" style="display:none;">
...
</table>

这是我的jquery样本

$(function(){
    $(".hide_chk").on('click',function(){
        $(this).next(".leads").show();
        $(this).addClass("show_chk");
        $(this).removeClass("hide_chk");
        $(this).html("- Hide Table");
    });
    $(".show_chk").on('click',function(){
        $(this).next(".leads").hide();
        $(this).addClass("hide_chk");
        $(this).removeClass("show_chk");
        $(this).html("+ Show Table");
    });
});

table和div元素是多个，这里当我首先点击表格显示但是在下次点击后它没有隐藏...

有人帮助

Answer 1

您需要使用事件委派。

变化：

$(".show_chk").on('click',function(){

到

$(document).on('click','.show_chk',function(){

执行代码时不存在.show_chk元素，因此该代码没有任何内容可以绑定。通过使用事件委托和绑定到执行代码时存在的元素，该函数将起作用。

jquery下一个元素show hide toggle

1 个答案: