Refresh $(document).ready in Javascript

Question

I have a script that runs continuously on my page, and it detects if a new item has been submitted to my DB, at which point it adds additional html to my page:

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);

I have another script that submits an update to the DB via AJAX when a user clicks a button in the newly created element. It looks like this:

//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;});
    });

My issue, is that the second AJAX submit doesn't appear to be working. I think this is due to the fact that the $(document).ready command only fires when the page first loads, and due to the fact that I'm updating the page content dynamically via AJAX, any new elements added to the page can't be submitted.

I've tried .delegate and .live, as opposed to .ready and neither appeared to work.

Any help would be greatly appreciated.

Answer 1

Make the functionality from document.ready into a callback, and then do that every time you append a new element to the page from ajax like this:

$(document).ready(function(){ MakeClaim(); });

function MakeClaim(){
 $(".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;});
}

success : function(response){
        $.getJSON("new_lead_alerts_process.php", function(data) {
            if (count_cases != -1 && count_cases != data.count) {
             //that huge string
             MakeClaim();
            }
            count_cases = data.count;
        });
}

EDIT

try changing this:

onClick=\"expand('claimed"+data.id+"');collapse('claimButton"+data.id+"');\"

to

onClick=\"expand('claimed"+data.id+"');collapse('claimButton"+data.id+"');return false;\"

Answer 2

Please try this:

function TryIt(getId)
{
        var element = $(getId);
        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
        });

}

just use javascript onclick function in claimButton and call TryIt() function whenever you want.