Reputation: 89
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
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