Question

我过去曾遇到类似的问题，因为我没有使用委托事件。现在我正在使用委托事件，但它仍然不适用于新更改的ID。这个委托事件不适用于dom更改的原因是什么，我将如何解决这个问题？

以下是两个div交换id'show'的示例。每当点击“显示”列表项时，它应该使用委托事件.on来触发，但它不会。

    <style>.hide {display:none;}</style>
    <div id="show">
        <span id="number" class="hide">2</span>
        <span id="list" class="hide">item1,item3</span>
        <ul class="img_list">
            <li>Something</li>
            <li>Something</li>
            <li>Something</li>
        </ul>
        <div class="box">
            <button type="button" class="hide" id="checkanswer">check answer</button>
        </div>
    </div>
    <div class="hide">
        <span id="number" class="hide">1</span>
        <span id="list" class="hide">item1</span>
        <ul class="img_list">
            <li>Something</li>
            <li>Something</li>
        </ul>
        <div class="box">
            <button type="button" class="hide" id="checkanswer">check answer</button>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    var selection_required=$('#show #number').html();

    $('#show').on('click', '.img_list li', function(){
        if($(this).hasClass("selected")){
            $(this).removeClass("selected");
        }
        else{
            $(this).addClass("selected");}
        if ($('.selected').length==selection_required){ 
             $("#show #checkanswer").fadeIn( "slow", function() {});
            }
        else{
            $("#show #checkanswer").fadeOut( "slow", function() {});
        }
    });

    $('#checkanswer').click(function(){
        parent=$(this).parent().parent();
        next=$(this).parent().parent().next();
        parent.removeAttr("id");
        parent.addClass("hide");
        next.attr("id","show");
        next.removeClass("hide");
        selection_required=next.find('#number').html();
        item_array=next.find("#list").html();
        next.show();
    });
    </script>

Answer 1

委托通过将事件侦听器绑定到一个元素来工作，该元素接收从其子级冒出的事件。元素动态变化时使用它的原因是因为事件仍附加到元素上;如果你使委托成为一个变化的元素，它就会失败。相反，你可以升级，无论在哪里 - 甚至只是document。

$(document).on('click', '#show .img_list li', function(){
    if($(this).hasClass("selected")){
        $(this).removeClass("selected");
    }
    else{
        $(this).addClass("selected");}
    if ($('.selected').length==selection_required){ 
         $("#show #checkanswer").fadeIn( "slow", function() {});
        }
    else{
        $("#show #checkanswer").fadeOut( "slow", function() {});
    }
});

顺便说一下，您的第一个if可以是$(this).toggleClass("selected")。

Answer 2

正如其他评论者所提到的，您需要.on事件：

$(document).on('click', '#show .img_list li', function () {...

但您还需要在.selected事件中重置您的.on课程，如下所示：

$(document).on('click', '#show .img_list li', function () {
            if ($(this).hasClass("selected")) {
                $(this).removeClass("selected");
            }
            else {
                $(this).addClass("selected");
            }
            if ($('.selected').length == selection_required) {
                $("#show #checkanswer").fadeIn("slow", function () { });
                $('.selected').removeClass('selected');
            }
            else {
                $("#show #checkanswer").fadeOut("slow", function () { });
            }
        });

需要$('.selected').removeClass('selected');。

Answer 3

尝试在文档

上执行这样的委托

 $(document).on('click','#show .img_list li',function(){
...
});

.on（）委托事件未触发

3 个答案: