Question

这是html

<div class="parentDiv">
    <div class="childDiv">
        <!-- here to add button -->
    </div>
</div>

这是jquery代码：-

$.ajax({
    url : "url.php",
    type : "POST",
    data : {someData : "some data"},
    success : function(data){
        $("#childDiv).html("<button id='clickMe'>Click me</button>");
    }
});

通过ajax添加元素后，此代码不起作用

$("#clickMe").on("click",function(){
    alert("please help!");
});

#click我无法正常工作。

我如何解决它，使其正常工作？

Answer 1

因为您正在创建<button id='clickMe'>Click me</button> ，仅在异步调用返回后，所以当您尝试向其附加事件处理程序时，它尚不存在 。另外，您尝试将按钮附加到不存在的元素上-您没有div#ChildDiv，但是具有CSS类childDiv。

相反，在创建事件处理程序后直接附加它：

$.ajax({
  url : "url.php",
  type : "POST",
  data : {someData : "some data"},
  success : function(data) {
    // create your button in your ASYNCHRONOUSLY
    // executed success handler function
    $(".childDiv").first().html("<button id='clickMe'>Click me</button>");
    // now that it exists, attach the click handler
    $("#clickMe").on("click",function(){
      alert("please help!");
    });
  }
});
// code that appears here will be executed BEFORE the success function!
// (synchronously)

从ajax调用加载数据后，选择器在jQuery中不起作用

1 个答案: