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.
InformationsquelleAutor Jeremy | 2012-10-05
Schreibe einen Kommentar