button 的点击事件不响应

心已赠人 2022-06-08 03:54 289阅读 0赞

在项目中，给页面动态添加内容，然后给动态添加的button的点击事件不生效。

在Jquery中动态添加内容如下所示：

var bgbackground = '<div id="bg">' + '</div>';   
    	    $("body").append(bgbackground);                         //遮罩层
    	    // 提示框
    	    var alert_content = '<div id="prompt_msg">' + '<p class="p1"> 是否接著添加紅包 </p>' +
    	        '<button class="p2" id="yesBtn">是</button>' + '<button id="noBtn" class="p2" style="margin-left: 61px;"> 否 </button>' + '</div>';
    	    $("body").append(alert_content);                       //弹窗

显示效果如下：

![Center][]

动态添加的内容：遮罩层和弹窗。

在Jquery中定义 按钮“是”的点击事件：

$(function(){
        $('#bg').css("display","none");
        $('#prompt_msg').css("display","none");
    })

目的：点击“是”，则关闭弹窗和遮罩层。但是并没有达到预期的效果。

原因分析：通过在console调试，发现并不能进入点击事件。在这里 我们是在Jquery框架写的函数，并且内容是动态添加的，通过$符号获取不到“是”按钮这个对象。

解决方法：直接用js定义点击事件，在元素上绑定点击事件

var bgbackground = '<div id="bg">' + '</div>';
    	    $("body").append(bgbackground);
    	    // 提示框
    	    var alert_content = '<div id="prompt_msg">' + '<p class="p1"> 是否接著添加紅包 </p>' +
    	        '<button class="p2" id="yesBtn" οnclick="clickYesBtn()">是</button>' + '<button id="noBtn" class="p2" style="margin-left: 61px;"> 否 </button>' + '</div>';
    	    $("body").append(alert_content);

如上面红色部分所示： οnclick="clickYesBtn()"

js代码如下：

function clickYesBtn(){

$('#bg').css("display","none");
    		$('#prompt_msg').css("display","none");
    	}

问题：console提示  clickYesBtn（） is not a function.

解决方法：将函数定义成如下形式

//点击提示框的“是“按钮事件
    	clickYesBtn = function(){
    		$('#bg').css("display","none");
    		$('#prompt_msg').css("display","none");
    	}

最终问题解决了

[Center]: /images/20220608/f8b3e3ab397a4c69b6d4b75f479214d1.png