使用jQuery將子動態添加到ul

Question

我想用jQuery事件向ol添加一個custum li ，這是我的代碼

success: function(data) {
            if (data != ''){
                $ulSub = $("#firstList");
                                $("#Pushtype_destinationList").val(crit1);
                $.each(data.dataa, function (i,item) {
           $str="";

                    for(var key in item){ if(key != 'id'){$str+= item[key]} }
                    $ulSub.append( '<li class="ui-widget-content " id="'+item.id +'" >' +$str+'</li>');

                });
            }
        }

和我的HTML代碼如下

 <ol class="selected" id="firstList">
                <li class="ui-widget-content ">text 1</li>
                <li class="ui-widget-content ">text 2</li>

            </ol>

將第一個ol的元素li添加到第二個ol的函數jquery為

    jQuery('ol#firstList li').click(function() {

       $(this).toggleClass('selected');

      $('#result').html($('#firstList .selected').clone())

   });

到現在為止，一切工作都很好，但是當我選擇一個新元素時，可以使用此函數動態添加

 ( `for(var key in item){ if(key != 'id'){$str+= item[key]} }
                            $ulSub.append( '<li class="ui-widget-content " id="'+item.id +'" >' +$str+'</li>');

                        });)   

此元素不能添加到第二個<ol id="result>

如您在此處看到的，當我單擊它們時，當添加元素text1和text2時，但是動態添加的其他元素沒有

任何幫助請

Answer 1

之所以會發生這種情況，是因為在事件處理程序分配代碼運行時，您僅將事件處理程序分配給DOM中已經存在的項目。

嘗試：

jQuery(document).on('click', 'ol#firstList li', function() {
     $(this).toggleClass('selected');
     $('#result').html($('#firstList .selected').clone())
});

有關更多詳細信息，請在jQuery文檔中查找“ .on”。

Answer 2

像每個循環之前清除html

$ulSub.html('');

PUT同伴代碼

success: function(data) {
            if (data != ''){
                $ulSub = $("#firstList");
                $("#Pushtype_destinationList").val(crit1);
                $ulSub.html('');
                $.each(data.dataa, function (i,item) {
                $str="";
                for(var key in item){ if(key != 'id'){$str+= item[key]} }
                    $ulSub.append( '<li class="ui-widget-content " id="'+item.id +'" >' +$str+'</li>');

                });
            }
        }