Trigger events not working on ajax loaded html
Well After you edit in a row in this table i've created on focusout it suppose to reload the entire row with updated data, the thing is the trigger event stop working after the first load so any changes done after the first one doesnt get saved.
I use currently this code
$(function () {
$.ajaxSetup ({
cache: false
});
$("td input").focusout(function() {
var defval = $(this).attr('title');
var value = $(this).attr('value');
var column = $(this).closest('td').attr('clas开发者_开发百科s')
var user = $('input[type=hidden]').attr('value');
var row = $(this).closest('tr').attr('id')
if(defval == value){
var state = 'Good Standing.';
}else{
var state = 'Will update spread sheet...';
var loadUrl = "./ajax/update.php";
$('#'+row+'').load(loadUrl, {row: row, user: user, column: column, value: value});
}
});
});
and the row looks currently like this
<tr class="numbers" id="3">
<td class="a" align="right">3</td>
<td class="b"><input class="input" type="text" title="1750" value="1750"/></td>
<td class="c"><input class="input" type="text" title="2100" value="2100"/></td>
<td class="d"><input class="input" type="text" title="0" value="0"/></td>
<td class="e"><input class="input" type="text" title="0" value="0"/></td>
<td class="f">3.5</td>
<td class="g"><input class="input" type="text" title="0" value="0"/></td>
</tr>
any aid i'll get it is greatly appreciated
regards
Use event delegation (live or delegate):
// using .live
$("td input").live("focusout", function() {
...
// using .delegate
$("table td").delegate("input", "focusout", function(){
...
When you attach a handler as above, essentially you are:
Attaching a handler to the event for all elements which match the current selector, now or in the future.
In other words, ajax replaced elements will continue to fire the events initially bound to them in that way.
精彩评论