jQuery .replaceWith無法正常工作

Question

我有一個jquery代碼，它阻止鏈接轉到該鏈接但執行該鏈接。 我的問題是執行腳本並返回數據后，我想用一個新的但具有相同類的腳本替換它。 替換操作是在dom內部進行的，但是下次我按該鏈接不會阻止轉到該鏈接，但該類是相同的，這是我的代碼：

<script>
$(".recomanda").click(function(e){
    e.preventDefault();
    var test=$(this);

    var href = $(this).attr('href');


    $.getJSON(href, function(data) {

        if(data.recom==1)
        {
        $(test).replaceWith('<a class="recomanda" href="app/recomanda_produs.php?id=' + data.id + '&recom=' + data.recom + '">Recomandat</a> ');

        }
        if(data.recom==0)
        {
        $(test).replaceWith('<a class="recomanda" href="app/recomanda_produs.php?id=' + data.id + '&recom=' + data.recom + '">Recomanda</a> ');

        }

    });
});
</script>

html

<a class="recomanda" href="app/recomanda_produs.php?id='.$row['ID_Produs'].'&recom=0">Recomanda</a>

Answer 1

是的，我之前也遇到了這個問題，這是因為當您在ready（）上附加單擊以推薦時，但是當ajax加載時，ready（）中的所有內容都不會再次觸發，這就是為什么您需要將事件附加到非動態元素，讓它找到它的子選擇器。

$('body').on('click', '.recomanda', function() {}); 

Answer 2

實際上，當您調用replaceWith您將刪除綁定到onclick處理程序的元素：

。用。。。來代替（）

說明：用提供的新內容替換匹配元素集中的每個元素，並返回被刪除的元素集。

主要思想是您的處理程序必須綁定到相同的元素（單擊時不會刪除）。 因此， replaceWith使用replaceWith方法， replaceWith使用像這樣修改現有元素的方法：

test.attr('href', blablabla);

這不是問題，但是第二次您不需要將$與test變量一起使用。

Answer 3

您需要將事件委托給父項，以便可以將其應用於當前或將來存在的特定子項。

參見： http : //learn.jquery.com/events/event-delegation/

$("body").on("click", ".recomanda", function(e){
    e.preventDefault();
    var test=$(this);
    var href = $(this).attr('href');

    $.getJSON(href, function(data) {
        if(data.recom==1){
            $(test).replaceWith('<a class="recomanda" href="app/recomanda_produs.php?id=' + data.id + '&recom=' + data.recom + '">Recomanda"+((data.recom==1)?"t":"")+"</a> ');
        }
        if(data.recom==0){
            $(test).replaceWith('<a class="recomanda" href="app/recomanda_produs.php?id=' + data.id + '&recom=' + data.recom + '">Recomanda</a> ');
        }
    });
});