button 的点击事件不响应

在项目中,给页面动态添加内容,然后给动态添加的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);                       //弹窗 
显示效果如下:


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

在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");
	}
	

最终问题解决了



  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值