js动态生成按钮的响应

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36032963/article/details/80743912

动态添加按钮：

function_name: function (data) {    
        var self = this;
		var info = null;
        $(".step").hide();
        $("#stepAddvisitor").show();
	
        if (data != null && data != '') {
            info = eval('(' + data + ')');
            $("#visitorinfo").append("<tr><td>"+info.name+"</td><td><button type=\"button\" class=\"btn delete\">删　除</button></td></tr>");
        } 
		
        self.startCountDown(60);
    }

删除响应：

//删除  
$(".delete").click(function(){
    $(this).parents("tr").remove(); 
    //其他
});

这时候响应没有写在function里，会发现动态生成的按钮是无法响应的。

方法一：

只要把响应写在函数里就可以解决这个问题。

function_name: function (data) {    
        var self = this;
		var info = null;
        $(".step").hide();
        $("#stepAddvisitor").show();
	
        if (data != null && data != '') {
            info = eval('(' + data + ')');
            $("#visitorinfo").append("<tr><td>"+info.name+"</td><td><button type=\"button\" class=\"btn delete\">删　除</button></td></tr>");
        } 
		
		//删除  
		$(".delete").click(function(){
			$(this).parents("tr").remove(); 
		});
		
        self.startCountDown(60);
    }

方法二：

js动态生成元素的时候给他加上 onclick之类的方法来响应

$("#visitorinfo").append("<tr><td>"+lastrow+"</td><td><button type=\"button\" class=\"btn delete\" onclick=\"myfunction()\">删　除</button></td></tr>");

原因是 

在页面给元素注册点击事件的时候    $(".delete").click(function(){   XXXX   });     JS动态生成的元素还尚未生成，所以click事件就没有生效。