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，然后将事件委托给动态添加的元素。

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

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

Answer 2

试试这个：

$(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 中，否则这可能无效。

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

2 个答案: