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('class')
        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

回答1:

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.

来源：https://stackoverflow.com/questions/2878229/trigger-events-not-working-on-ajax-loaded-html

标签

jquery

ajax

eventtrigger