Question

这是我想要添加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来获取数据库中的数据。

Answer 1

如果.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/

Answer 2

event未在click处理程序匿名函数中定义为参数？

$('#cris').click(function() {
  // `event` is `undefined` here
  event.preventDefault();
  $(this).text('I CHANGE');
});

，到达event.preventDefault()时会返回错误？尝试将event添加到click处理程序

$('#cris').click(function(event){
  event.preventDefault();
  $(this).text('I CHANGE');
});

Answer 3

我建议您使用委托。像这样的代码：

$(document).on('click', '#cris', function(e) {
  e.preventDefault();
  $(this).text('I CHANGE');
});

这将捕获id为“cris”的任何元素上的click事件，无论它们何时或如何创建。请注意不要将此代码放在$.ajax电话中。

在ajax响应的处理程序中添加事件处理程序意味着每次ajax调用成功时都会创建一个新的事件处理程序，这可能会导致内存泄漏和/或多次发生click事件。如果您想这样做，可以在绑定点击处理程序之前添加对$().off()的调用：

$('#chris').off('click').click(...

但这似乎是一个额外的步骤，考虑到代表团总会接受这个事件。

Answer 4

事件委托方法将起作用...一个好的事件处理程序可能是最近的静态父元素

$('#people').on('click', 'button#cris', function(e) {
    e.preventDefault();
    $(this).text('I CHANGE');
});

但如果您在$("#people").append(peopleHTML);之后绑定事件，这也可以与$('#cris').click一起使用。基于未定义的变量事件，你有一些控制台错误吗？

如何使用Jquery访问.html（）上的html元素？

4 个答案: