Jquery Update-Funktion bei Bedarf

Question

Ein Knopf ruft jedes Mal neue Beiträge auf, wenn er angeklickt wird. Funktion ruft die Posts über AJAX auf. Jeder Beitrag hat den gleichen Rechner darauf.

POST BEISPIEL:

<div class="post"> 
<div class="a">1</div> 
<div class="b">8</div> 
<div class="sum">x</div> 
<div class="count">Count</div> 
<div> 

Ich habe eine Funktion, was natürlich nicht funktioniert, wenn sie aufgerufen wird, bevor die Post erschien. Mit anderen Worten, wenn POST hinzugefügt wird, funktioniert diese Funktion nicht, wenn sie nicht NACH dem Hinzufügen des Posts aufgerufen wird. Dies ist wegen der Natürlichkeit von Javascript. Funktion Beispiel:

Funktion loadCounter() { $ ("zählen. ") Klicken (function() { $ (this) .parent() finden() html (parseInt (.." Sum.". $ (this) .parent(). find (". a") .html()) + parseInt ($ (this) .parent(). find (". b") .html()))

}) 

.

}

wenn nun die Funktion würde jedes Mal AJAX aufgerufen wird aufgerufen werden - Browser würde es das gleiche paar Mal verwendet es ist so etwas wie:

$(".count").click(function(){ 
$(this).parent().find(".sum").html(parseInt($(this).parent().find(".a").html())+parseInt($(this).parent().find(".b").html())) 
$(this).parent().find(".sum").html(parseInt($(this).parent().find(".a").html())+parseInt($(this).parent().find(".b").html())) 
$(this).parent().find(".sum").html(parseInt($(this).parent().find(".a").html())+parseInt($(this).parent().find(".b").html())) 

}) 

Und das Ergebnis auf jedem Post würde bitte dabei helfen könnte

Ich kann nicht kommen mit der Lösung, vielleicht jemand mir nicht 1 + 8 = 9, aber 18 oder 27 usw. sein?

Answer 1

Ereignisdelegierung verwenden; Ereignis an Elternelement von dynamisch erstellten Elementen und angehängtem Element anhängen oder document; Ersatz .siblings() für $(this).parent().find()

Siehe

• Understanding Event Delegation

• Events and Event Delegation

$(document).on("click", ".count", function() { 
    $(this).siblings(".sum") 
    .html(
    parseInt($(this).siblings(".a").html()) 
    + parseInt($(this).siblings(".b").html()) 
); 
}); 

Alternativ, wenn Sie eine Funktion vor jedem $.ajax() Aufruf aufrufen müssen, verwenden Sie beforeSend Option Getting code to run syncronously that resides inside a function called via an AJAX call

Answer 2

Hier einfache Satz basiert auf, was Sie sagten im Kommentar (aber ohne Ihren vollständigen Code zu veröffentlichen, ich habe etwas vielleicht verpasst) . Mein Vorschlag ist, dass anstelle loadCounter jedes Mal zu rufen Sie mit Ihrem Ajax einen neuen Div laden (aus diesem Grunde, die bereits geladen Div mehrere Klick-Ereignis mit ihnen verbunden hat) nur Ihre geladene HTML Um dies zu ändern:

<div class="post"> 
<div class="a">1</div> 
<div class="b">8</div> 
<div class="sum">x</div> 
<div onclick="calculate(this)" id="2" class="count">Count</div> 
<div> 

Und fügen Sie diese zu Ihrer JS:

function calculate(me) { 
    $(me).siblings('.sum').html(parseInt($(me).siblings(".a").html())+parseInt($(me).siblings(".b").html())); 
}