添加子李dynamicaly與jQuery

Question

到UL我想一個俗li添加到ol與jquery事件， 這是我的代碼

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> 

和功能的jquery從第一醇添加元素裏到第二醇是作爲

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

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

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

    }); 

到現在的每一件事情工作的偉大，但是當我CLIC一個新的元素上使用此功能

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

         });) 

這個元素不能被添加到第二​​

動態添加

正如你在這裏看到的，當元素text1和text2被添加時，當我在他們身上，但其他動態添加的元素牛逼

任何幫助，請

Answer 1

這是因爲你只分配你的事件處理程序的事件處理程序分配的代碼運行的時間在DOM中已經存在的項目。

嘗試：

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

查找jQuery的文檔以獲得詳細信息 '對'。

Answer 2

像

$ulSub.html(''); 

每個循環之前明確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>'); 

       }); 
      } 
     }