Question

我尝试使用.html（）打印的按钮。我在搜索了这个网站后尝试过.find（）但是仍然没有检测到onclick事件。

<div id = "div4html">div</div>
<button id="printbtn">printbtn</button>

<script>
$("#printbtn").on( "click", function() {
    $("#div4html").html('<button id ="btntest">btntest</button>');
});

$("#div4html").find("#btntest").on( "click", function() { 
    alert("on click");
});
</script>

虽然#btntest onclick没有显示警报，但#btntest上的CSS有效。我不了解动态创建的元素吗？

Answer 1

您无法执行此操作，因为默认情况下，即使是新创建的内容中的事件，也不会这样做。

以下是这样做的方法：

$("#div4html").on('click', "#btntest" , function() {
// Your code
}

Answer 2

从正文中委派活动

$("body").on( "click",'#btntest', function() { 
   alert("on click");
});

Answer 3

您需要： - $("#div4html").on( "click", "#btntest", function() {

它被称为： - Event Delegation

实施例： -

$("#printbtn").on( "click", function() {
  $("#div4html").html('<button id ="btntest">btntest</button>');
});

$("#div4html").on( "click","#btntest", function() { 
  alert("on click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "div4html">div</div><br>
<button id="printbtn">printbtn</button>

jQuery .html（）中的事件无法检测到

3 个答案: