Изменение обработчика 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, а затем делегируйте событие динамически добавленному элементу.

$("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 до, этот скрипт выполняется, иначе это может быть неэффективно.