jQuery .replaceWith无法正常工作

Question

i have a jquery code that is preventing a link to go to that link but executing it. The problem i have is that after it executs the script and script is returning data i want to replace it with a new one but with the same class. The replace is doing inside the dom but next time i press that link is not prevening going to that link but the class is the same, here is my code:

<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

When you call a replaceWith actually you are removing elements that are bound to onclick handler:

.replaceWith()

Description: Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

The main idea is that you handler must be bound to the same element (that is not removed when clicking). So instead of using replaceWith method use method that modify existing element like this:

test.attr('href', blablabla);

And this is not a problem, but second time you don't need to use $ with test variable.

Answer 3

You need to delegate the event to a parent so that it can be applied to specific children wether they exist now or in the future.

See: 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> ');
        }
    });
});