javascript - 更改页面加载后动态添加的元素的 onclick 处理程序

Question

我有以下 DOM 结构。

<div class="purchase-section">
   <div class="purchase">
      <input type="submit" id="add-to-cart" class="btn" name="add" value="Add to Cart"> <span class="rc-or">Or</span>
      <button class="btn rc-button" id="btn-buy-now" onclick="event.preventDefault(); window.location='https://example.com?productId=681';">Buy Now - 3 installment</button>
   </div>
</div>

按钮元素是由页面加载后运行的脚本添加的。我需要更改此按钮的 onclick 处理程序。我尝试跟随但它不起作用。

$(document).ready(function() {
$('.purchase-section').on('change', '.purchase', function(){
    $("#btn-buy-now")[0].onclick = null;
    $("#btn-buy-now").click(function() { alert("done") });
  });
});

有人可以帮我解决这个问题吗？

Answer 1

使用 $("#btn-buy-now").removeAttr("onclick"); 完全删除 onclick ，然后将事件委托(delegate)给动态添加的元素。

$("static_parent").on("event", "dynamic_element", function () {
});

$(".purchase").on("click", "#btn-buy-now", function () {
  /* code */
});