Bullwinkle
Bullwinkle

Reputation: 89

Call function after AJAX load

I have jQuery script that helps me to mark rows in table. Also i have AJAX function that allows me to load additional data to this table. My idea is to call Picker function every time after AJAX used to let this data to be marked as well. It works, but very unstable - i can mark some blocks of loaded data, and can't mark other. And i can't catch where i am wrong.

<script>
var Picker = function() { // This is marker script
        $(".query, .schedule_query_table_highlight").click(function(){
        if ($(this).attr("class") == "schedule_query_table_highlight") {
            $(this)

.removeClass("schedule_query_table_highlight");
            $(this).addClass("query");
        }
        else {
        $(this).removeClass("query");
        $(this).addClass("schedule_query_table_highlight");
        }
        });
};

$(document).ready(function(){
    Picker();   
    $("#more").click(function(){
    $(".more_space").load("inquery_ajax.php?date=" + curr_year + "-" + curr_month + "-" + curr_date, function(){
            Picker();
        });         
        $(".more_space").addClass("loaded" + days);
        $(".more_space").removeClass("more_space");
        $(".loaded" + days).after("<x class=more_space></x>");
        $("#more").insertBefore(".more_space");
    });
});
</script>

UPD: FIDDLE

Upvotes: 0

Views: 362

Answers (1)

SSA
SSA

Reputation: 5493

Don't know what is unstable but I assume unstable means here that the new content is not getting highlighted. As the content is dynamic, use event binding on document

$(document).on("click",".query .schedule_query_table_highlight",function(){

Example code:

var Picker = function() { // This is marker script
        $(document).on("click",".query .schedule_query_table_highlight",function(){
        if ($(this).attr("class") == "schedule_query_table_highlight") {
            $(this)

.removeClass("schedule_query_table_highlight");
            $(this).addClass("query");
        }
        else {
        $(this).removeClass("query");
        $(this).addClass("schedule_query_table_highlight");
        }
        });
};

Upvotes: 1

Related Questions