Question

想法

我有一个主PHP页面，使用JQuery和AJAX从外部文件加载DIV中的内容。

该页面的工作原理如下：

主页面包含链接列表，单击链接时，AJAX会将外部DIV加载到页面上。
这个新的DIV，然后有另一个链接列表，点击后，AJAX再次加载另一个外部DIV
现在有3个DIV包含链接列表，这个过程可以反复重复。

DIV中的每个链接都有参数，用于过滤下一个DIV的结果。

<div id="destination_Div01">
  <a href="?Div01=1">Link</a>
</div>

问题

$(document).ready(function() {                         
    $('#Destination_Div01 a').click(function(){
        $("#Destination_Div02").load("External.php"+$(this).attr('href')+" #Target_Div02");
        return false;
    });

    $('#Destination_Div02 a').click(function(){
        $("#Destination_Div03").load("External.php"+$(this).attr('href')+" #Target_Div03");
        return false;
    });
});

首次加载页面时，只有一个DIV存在，当加载新的DIV时，我不认为JQuery注意到现在有一个带链接的新DIV。

现在，当单击新Destination_Div02中的链接时，JQuery无法识别关联的功能，浏览器将继续加载链接的URL。相反它的意思是使用AJAX将链接URL参数传递给外部PHP文件，过滤记录集并返回新的DIV。

如何让JQuery与新生成的链接一起使用？

答案

归功于“great_llama” 确保您拥有JQuery 1.3+并将代码更改为 $（'＃Destination_Div01 a'）。live（“click”，function（）{

$(document).ready(function() {                                             
    $('#Destination_Div01 a').live("click", function(){
        $("#Destination_Div02").load("External.php"+$(this).attr('href')+" #Target_Div02");
        return false;
    });

    $('#Destination_Div02 a').live("click", function(){
        $("#Destination_Div03").load("External.php"+$(this).attr('href')+" #Target_Div03");
        return false;
    });
});

Answer 1

使用jQuery 1.3，可以使用.live method。

绑定到未来的匹配元素

“将处理程序绑定到事件（如点击）了解所有当前和未来 - 匹配元素。也可以绑定自定义事件“。

Answer 2

我认为最好的解决方案是使用callback参数，因此在加载动态内容后，您可以与其DOM进行交互。

$('#Destination_Div02 a').click(function(){
    $("#Destination_Div03")
    .load("External.php"+$(this).attr('href')+" #Target_Div03", null, function() {
         $(this).click( ///your click code again/// );
         //according to the docs this is the element you just loaded
    );
    return false;
});

Answer 3

将后续的$（'div'）。click（）放在回调函数中，用于前一次点击：

$('div1').click(function(){
    $('div2').load(link, data, function(){
        $('div2').click(function(){
            $('div3').load(link, data, function(){})
        })
    })
})

或者你可以给这些链接一个类，每次你添加一个新的div时，调用一个函数来填充点击时有动作的链接列表：

$('div1').click(function(){
    $('div2').load(link, data, function(){
        some_function();
    }
});

function some_function(){
    $('.class').click(function(){
        //logic here
    }
});

JQuery / AJAX：使用来自外部内容的ID的函数

想法

问题

答案

3 个答案: