JS中,關於使用ajax動態添加數據後onclick事件失效解決辦法

原先

 $("tbody tr td:not(:nth-child(1))").on("click",function(){
        var str = $(this)[0].outerHTML;
        console.log(str);
        if(str.search("img")==-1){
            var ht='<img src="${cxt!}/static/wxweb/car/images/check.png">';
         $(this).append(ht);
        }else{
         $(this).empty();
        }
    });
});

當html不加載數據可以正常點擊。用動態加載此方法失效$("tbody tr td:not(:nth-child(1))").on("click",function(){

改用: $(document).on('click','tbody tr td:not(:nth-child(1))',function () {

$(function() { 
   	InitItems();
    //動態增加圖片效果 $("tbody tr td:not(:nth-child(1))").on("click",function(){
    $(document).on('click','tbody tr td:not(:nth-child(1))',function () {
	    var str = $(this)[0].outerHTML;
	    console.log(str);
		if(str.search("img")==-1){
	   	 var ht='<img src="${cxt!}/static/wxweb/car/images/check.png">';
	     $(this).append(ht);
		}else{
		 $(this).empty();
		}
    });
});


function InitItems(){
var url = cxt+"/wechat/oil/InitItems?_"+$.now();
   	$.ajax({
		type : 'POST',
		url : url,
		data : {memberId:memberId},
		async : true,
		cache : false,
		error : function(res) {},
		success : function(res) {
			var varOList=res.varOList;
		 	var con='';
		   for ( var i = 0; i <varOList.length; i++){
      			con+='<tr>'+
      				  '<td>'+varOList[i].ITEMNAME+'</td>'+
      				  '<td><img src="${cxt!}/static/wxweb/car/images/check.png"></td>'+
     				  '<td></td>'+
					  '<td></td>'+
					  '<td></td>'+
									
					  '<td></td>'+
					  '<td></td>'+
					  '<td></td>'+
					  '<td></td>'+
					  '<td></td>'+
						
					  '<td></td>'+
					  '<td></td>'+
					  '<td></td>'+
					  '<td></td>'+
					  '<td></td>'+
						
					  '<td></td>'+
					  '<td></td>'+
					  '<td></td>'+
					  '<td></td>'+
					  '<td></td>'+
      			'</tr>';
  		     }
  			$("tbody").html(con);
		}
	}); 
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章