button 的点击事件不响应
2017-09-13 21:58
218 查看
在项目中,给页面动态添加内容,然后给动态添加的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" onclick="clickYesBtn()">是</button>' + '<button id="noBtn" class="p2" style="margin-left: 61px;"> 否 </button>' + '</div>';
$("body").append(alert_content);如上面红色部分所示:onclick="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");
}
最终问题解决了
在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" onclick="clickYesBtn()">是</button>' + '<button id="noBtn" class="p2" style="margin-left: 61px;"> 否 </button>' + '</div>';
$("body").append(alert_content);如上面红色部分所示:onclick="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");
}
最终问题解决了
相关文章推荐
- UIImageView上添加Button不能响应点击事件
- 按钮Button及各种点击事件的响应
- Android listView 中响应Button点击事件
- tableHeaderView中的button点击事件不响应
- Android listView 中响应Button点击事件
- UIImageView上添加Button不能响应点击事件
- c# 给button添加不规则的图片以及用pictureBox替代button响应点击事件的方法
- android 点击button 弹出一个listview并且响应单击事件
- ListView中嵌入布局中有Button,如何响应Button点击事件
- Button响应鼠标点击事件
- Android下listview每个Item中包含有按钮,为什么在点击某一行按钮的时候,同时有多行button触发了响应事件?
- UIImageView上添加Button不能响应点击事件
- 两个堆叠fragment,上层fragment响应于降低fragment的button点击事件补救措施
- ListView中嵌入Button,并响应Button点击事件
- ListView中嵌入Button,并响应Button点击事件
- 关于Button点击两次才响应事件相关问题
- button响应点击事件的方法
- UIImageView上添加Button不能响应点击事件
- 解决父布局具有点击效果,但是子布局的Button不响应点击事件的问题
- Android listView 每行多个Button 响应点击事件