3

过去我也遇到过类似的问题，因为我没有使用委托事件。现在我正在使用委托事件，但它仍然不适用于新更改的 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>
4

3 回答 3

2

委托通过将事件侦听器绑定到一个元素来工作，该元素接收从其子级冒泡的事件。当元素动态变化时使用它的原因是因为事件仍然附加到元素上；如果你让委托成为一个改变的元素，它就达不到目的。取而代之的是，您可以更上一层楼，无论它在哪里——甚至只是到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")。

于 2013-11-11T18:10:14.883 回答
1

正如其他评论者所提到的，您的.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');是需要的。

于 2013-11-11T18:23:10.103 回答
0

试着在文件上做这样的代表团

 $(document).on('click','#show .img_list li',function(){
...
});
于 2013-11-11T18:10:12.720 回答