Aktualisieren $(document).bereit, in Javascript
Ich habe ein script, welches ständig an meiner Seite, und es erkennt, wenn ein neuer Artikel eingereicht wurde, meine DB, an welcher Stelle es fügt zusätzlichen html auf meiner Seite:
var count_cases = -1;
setInterval(function(){
$.ajax({
type : "POST",
url : "new_lead_alerts_process.php",
dataType: 'json',
cache: false,
success : function(response){
$.getJSON("new_lead_alerts_process.php", function(data) {
if (count_cases != -1 && count_cases != data.count) {
//add new HTML element to page
$('#content').prepend("<div class=\"reportRow\"><div id=\"reportRowLeft\" style=\"width: 63px;\">"+dayOfMonth+"</div><div id=\"reportRowCenter\">"+timeSubmitted+"</div><div id=\"reportRowRight\" style=\"width: 126px;\"><div id=\"claimButton"+data.id+"\"><form action=\"\" method=\"post\" name=\""+data.id+"\"><input type=\"hidden\" id=\"lead_id"+data.id+"\" name=\"lead_id\" value=\""+data.id+"\" /><input type=\"hidden\" id=\"client_id"+data.id+"\" name=\"client_id\" value=\""+data.client_id+"\" /><input type=\"hidden\" id=\"user_id"+data.id+"\" name=\"user_id\" value=\"1\" /><input type=\"image\" name=\"submit\" class=\"claimButton\" onClick=\"expand('claimed"+data.id+"');collapse('claimButton"+data.id+"');\" src=\"images/claim.gif\" id=\""+data.id+"\" style=\"width: 126px; height: 29px; margin: 0; border: 0px; padding: 0; background: none;\"></form></div><img id=\"claimed"+data.id+"\" style=\"display: none;\" src=\"images/claimed.gif\" /></div><div id=\"clear\"></div></div>");
}
count_cases = data.count;
});
}
});
},1000);
Habe ich ein weiteres Skript, das gibt ein update auf die DB per AJAX, wenn ein Benutzer auf eine Schaltfläche klickt, in das neu erstellte element. Es sieht wie folgt aus:
//update db when lead is claimed
$(document).ready(function(){
$(".claimButton").click(function(){
var element = $(this);
var Id = element.attr("id");
var client_id = $("#client_id"+Id).val();
var user_id = $("#user_id"+Id).val();
var lead_id = $("#lead_id"+Id).val();
var dataString = 'client_id='+client_id+'&user_id='+user_id+'&lead_id='+lead_id;
$.ajax({
type: "POST",
url: "new_lead_alerts_update.php",
data: dataString,
cache: false
});
return false;});
});
Mein Problem ist, dass die zweite AJAX-submit scheint nicht zu funktionieren. Ich denke, dies ist aufgrund der Tatsache, dass $(document).bereit-Befehl wird nur ausgelöst, wenn die Seite geladen wird, und aufgrund der Tatsache, dass ich die Aktualisierung der Seite Inhalte dynamisch per AJAX, werden neue Elemente Hinzugefügt, um die Seite kann nicht eingereicht werden.
Die ich ausprobiert habe .delegieren und .live, im Gegensatz zu .bereit und weder schien zu funktionieren.
Jegliche Hilfe würde sehr geschätzt werden.
- Sollten Sie delegieren das event:
$(document).on('click', '.claimButton', function(){
- Warum machst du nicht das Zeug in der Erfolgs-callback des AJAX-Funktion?
- Vielen Dank für die Anregungen. Allerdings habe ich versucht, alle drei dieser Ansätze, und Sie scheinen nicht die Lösung zu sein.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Stellen Sie die Funktionalität von document.bereit in einen callback, und dann, dass jedes mal, wenn Sie fügen Sie ein neues element auf der Seite von ajax wie diese:
BEARBEITEN
versuchen Sie dies:
zu
$('#form').submit(function(){ return false; });
, die nicht zu funktionieren scheinen jedoch.return false
können unterschiedliche Bedeutungen haben, innerhalb von jQuery-Verschlüsse.onsubmit="return false"
erfolgreich gestoppt, die form von der Abgabe, aber es hält auch die AJAX-Prozess durchgegangen.Bitte versuchen Sie dies:
nutzen Sie javascript onclick-Funktion in claimButton und rufen TryIt() Funktion, Wann immer Sie wollen.