通過Ajax加載內容后，jQuery無法正常工作

Question

我是Java腳本的新手。 當表格已存在於頁面中時，刪除表格行的代碼可以正常工作，但是如果我通過ajax調用從另一個頁面加載表格，則無法正常工作。請幫助我解決此問題。java腳本在這里

$(document).ready(function()
{
    $('table#delTable td a.delete').click(function()
    {
        if (confirm("Are you sure you want to delete this row?"))
        {
            var id = $(this).parent().parent().attr('id');
            var data = 'id=' + id ;
            var parent = $(this).parent().parent();

            $.ajax(
            {
                   type: "POST",
                   url: "delete_row.php",
                   data: data,
                   cache: false,

                   success: function()
                   {
                        parent.fadeOut('slow', function() {$(this).remove();});
                   }
             });                
        }
    });

    // style the table with alternate colors
    // sets specified color for every odd row
    $('table#delTable tr:odd').css('background',' #FFFFFF');
});

HTML代碼

<table id="delTable">       


    <tr id="ripon">
        <td align="left">Ipsum</td>
        <td align="center">19</td>
        <td align="center">17</td>
        <td align="center"><a href="#" class="delete" style="color:#FF0000;"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></a></td>
    </tr>
    <tr id="rukon">
        <td align="left">Dolor</td>
        <td align="center">55</td>
        <td align="center">12</td>
        <td align="center"><a href="#" class="delete" style="color:#FF0000;"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></a></td>
    </tr>
    <tr id="sumon">
        <td align="left">Sit</td>
        <td align="center">11</td>
        <td align="center">18</td>
        <td align="center"><a href="#" class="delete" style="color:#FF0000;"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></a></td>
    </tr>
    <tr id="mamun">
        <td align="left">Amet</td>
        <td align="center">29</td>
        <td align="center">27</td>
        <td align="center"><a href="#" class="delete" style="color:#FF0000;"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></a></td>
    </tr>

Answer 1

最簡單的解決方案是使用“委托事件”。 有關更多信息，請參閱docs on jQuery 。

$("body").on("click", "table#delTable td a.delete", function(event){
  // insert your code here
});

注意：當我叫on在body ，你可以調用它的東西“更接近”的表，如果它要在那里當頁面加載（或更具體地說，當你在on調用）。