如何使用Jquery访问.html()上的html元素？
提问于 2015-10-07 15:34:46
下面是我想要添加的html
<div id="people">这是我的脚本，当点击按钮时，它的文本将会改变
<script>
$(document).ready(function(){
$.ajax({
type: "POST",
url: "response1.php",
dataType: "json",
success: function(JSONObject) {
var peopleHTML = "";
// Loop through Object and create peopleHTML
for (var key in JSONObject) {
if (JSONObject.hasOwnProperty(key)) {
peopleHTML += "<div class='col-lg-3 col-md-3 col-xs-3'
style='padding-top:10px;'>";
peopleHTML += "<div class='box'>";
peopleHTML += "<div class='row'>";
peopleHTML += "<h3>" + JSONObject[key]["name"] + "</h3>";
peopleHTML += "<div class='col-xs-12'>";
peopleHTML += "<p>"+JSONObject[key]["gender"]+"</p>";
peopleHTML += "</div>";
peopleHTML += "<button class='btn btn-primary' id='cris'>
CLICK ME</button>";
peopleHTML += "</div>";
peopleHTML += "</div>";
peopleHTML += "</div>"; }
}
// Replace table’s tbody html with peopleHTML
$("#people").append(peopleHTML);
$('#cris').click(function(){
event.preventDefault();
$(this).text('I CHANGE');
});
}
});
});
</script>我怎样才能访问我添加的html元素，这样点击功能才能工作？我还使用了json来获取数据库中的数据。
回答 4
Stack Overflow用户
发布于 2015-10-07 15:43:57
如果.on()方法不起作用，您可以尝试这样做：
$('body').on('click', '#cris', function(event) {
event.preventDefault();
$(this).text('I CHANGE');
});这种方法无论如何都应该有效，但是使用body并不是最好的选择:您是在告诉jquery向整个body添加一个侦听器……最好使用较窄的父级，例如
$('.chrisparent').on('click', '#cris', function(event) {
event.preventDefault();
$(this).text('I CHANGE');
});编辑:以下是工作代码(没有ajax调用)：https://jsfiddle.net/a34poca9/
Stack Overflow用户
发布于 2015-10-07 15:47:07
在click处理程序匿名函数中未将event定义为参数？
$('#cris').click(function() {
// `event` is `undefined` here
event.preventDefault();
$(this).text('I CHANGE');
});，当到达event.preventDefault()时，哪一项会返回错误？尝试向click处理程序添加event
$('#cris').click(function(event){
event.preventDefault();
$(this).text('I CHANGE');
});Stack Overflow用户
发布于 2015-10-07 15:44:08
我建议您为此使用委托。代码如下：
$(document).on('click', '#cris', function(e) {
e.preventDefault();
$(this).text('I CHANGE');
});这将捕获id为"cris“的任何元素上的单击事件，无论它们是何时或如何创建的。请注意，不要将此代码放入$.ajax调用中。
在ajax响应的处理程序中添加事件处理程序意味着每次ajax调用成功时都会创建一个新的事件处理程序，这可能会导致内存泄漏和/或使click事件多次发生。如果您想这样做，您可以在绑定单击处理程序之前添加对$().off()的调用：
$('#chris').off('click').click(...但这似乎只是额外的一步，考虑到委派总是会拿起事件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32996494
复制相关文章
点击加载更多
腾讯云开发者
