jQuery脚本在.load（）之后不起作用

Question

Im just started yesterday with jquery/ajax. And im trying some things out, but I run into a wall.

I have an index file where I include my js script in this script I have two functions (see below)

In the index file I used include to include a php file that contains a table with some rows (rows from mysql). This included file I also use for the .load in my js script (mod/hoofdmenu.php).

One script is for changing the order of the rows by drag and drop, this works perfect. Other script is for changing 1 row when you click a image (publish/unpublish). This script works also perfect. BUT when I run this script the first script (drag and drop) doenst work anymore. The 'publish/unpublish' script still works.

I think its because the $('#showdata').load('mod/hoofdmenu.php'); All advise/help is very much appreciated.

the includes js file:

$(function() {
    $(".entry").live("click",function(event) {
    event.preventDefault();
    var id = $(this).attr("id");
    var dataString = 'id='+ id ;
    var parent = $(this).parent();
    $.ajax({
            url: "save.php",    
            type: "POST",       
            data: dataString,       
            cache: false,
            success: function (html) {  
                $('#showdata').load('mod/hoofdmenu.php');           
            }       
        });
    });
});
$(function() {
    $(".tbl_repeat tbody").tableDnD({
        onDrop: function(table, row) {
            var orders = $.tableDnD.serialize();
            $.post('mod/order.php', { orders : orders });
        }
    });

});

Answer 1

The drag and drop event applied to a DOM element that has now been replaced with the new stuff loaded by the AJAX request. You need to put the tableDnD behaviour on to the new elements.

There may be some fancy livequery style way of doing this but this should work:

function initDnD(root) { 
    root.find(".tbl_repeat tbody").tableDnD({
        onDrop: function(table, row) {
            var orders = $.tableDnD.serialize();
            $.post('mod/order.php', { orders : orders });
        }
    });
};

$(function() {
    $(".entry").live("click",function(event) {
        event.preventDefault();
        var id = $(this).attr("id");
        var dataString = 'id='+ id ;
        var parent = $(this).parent();
        $.ajax({
            url: "save.php",    
            type: "POST",       
            data: dataString,       
            cache: false,
            success: function (html) {  
                $('#showdata').load('mod/hoofdmenu.php', function() {
                    initDnD($('#showdata'));
                });           
            }       
        });
    });
    initDnD($("body"));
});