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

Change onclick handler of the element added dynamically after the page has loaded

本文关键字：添加 元素 onclick 程序 处理 动态 加载      更新时间：2023-09-26

我有以下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>

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

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

谁能帮我解决这个问题？

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

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

试试这个：

$(document).ready(function() {
   $(".purchase-section").find("#btn-buy-now").removeAttr('onclick');
   $(".purchase-section").find("#btn-buy-now").click(function(e) {
      e.preventDefault();
      alert("done");
   });
});

但是，这取决于加载此元素的时间。 在此脚本执行之前，您需要确保您的按钮已在 DOM 中，否则这可能无效。

相关文章：