通过ajax加载内容后,Jquery无法正常工作

时间:2013-04-25 01:42:45

标签: php javascript html jquery

我是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>

1 个答案:

答案 0 :(得分:3)

最简单的解决方案是使用“委托事件”。 有关详细信息,请参阅jQuery's on docs

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

注意:当我在on上调用body时,您可以在“更接近”表格的地方调用它,如果它在页面加载时会出现(或更具体地说,当您拨打on电话。