JS中,关于使用ajax动态添加数据后onclick事件失效解决办法

JS中,关于使用ajax动态添加数据后onclick事件失效解决办法_第1张图片

JS中,关于使用ajax动态添加数据后onclick事件失效解决办法_第2张图片

原先

 $("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='';
         $(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='';
	     $(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[i].ITEMNAME+''+
      				  ''+
     				  ''+
					  ''+
					  ''+
									
					  ''+
					  ''+
					  ''+
					  ''+
					  ''+
						
					  ''+
					  ''+
					  ''+
					  ''+
					  ''+
						
					  ''+
					  ''+
					  ''+
					  ''+
					  ''+
      			'';
  		     }
  			$("tbody").html(con);
		}
	}); 
}

 

你可能感兴趣的:(JS中,关于使用ajax动态添加数据后onclick事件失效解决办法)