jquery ajax加载链接问题

Question

有两个用于排序的链接，SortName、SortDate。当使用 jquery load 加载表 ($('table.listing').load...) 时，它就可以工作。当使用 $('form').load... 时它不起作用。这是为什么？

下面的代码可以工作，但是如果将“table.listing”更改为“form”，则它不起作用。问题是因为链接也应该加载，并且它们位于表格上方的 div 中，所以我需要使用“form”或某些 div，尽管 div 包装器也不起作用。

这意味着它不起作用:如果您使用“表单”，则需要单击链接两次才能加载容器!？

<form method="post">
<div>
    <a href="" id="sortn">SortName</a><br/>
    <a href="" id="sortd">SortDate</a>
</div>
<table class="listing">
    ...table code here
</table>
</form>

<script type="text/javascript">
$(document).ready(function(){
    $('a#sortn').click(function(event) {
        event.preventDefault();
        $('table.listing').load('index.php?sort=1 table.listing');
    });
    $('a#sortd').click(function(event) {
        event.preventDefault();
        $('table.listing').load('index.php?sort=2 table.listing');
    });
});
</script>

Answer 1

我不确定为什么加载表单不起作用，但我不会这样做。您应该将表单包装在 div 中，然后将所有内容加载到那里。您还需要在加载后重新绑定(bind)点击操作。将其包装在 div 中有何作用？

编辑:加载完成后重新绑定(bind)链接:

<script type="text/javascript">

    function doLoad(sort){
        //if you switch to the div method, obvously the selector needs to change
        var selector = "table.listing";
        //var selector = "#newDivId";

        $(selector).load('index.php?sort='+sort+' '+selector, function(){
            doBindings();
        });
    }

    function doBindings(){
        $('a#sortn').unbind('click');
        $('a#sortd').unbind('click');
        $('a#sortn').click(function(event) {
            event.preventDefault();
            doLoad(1);
        });
        $('a#sortd').click(function(event) {
            event.preventDefault();
            doLoad(2);
        });
    }


$(document).ready(function(){
    doBindings();
});
</script>