2

我有以下 html 树：

<div class="section yellow" id="section1">
    <div id="content-wrap1" class="content-wrap">
</div>

我正在使用 ajax 将以下内容加载到#content-wrap1：

<div id="content">
    <a href="whoweare.php">Who we are</a>
    <a href="whatwedo.php">Our team</a>
    <p>ABOUT US : Dance is a type of art</p>
</div>

成功发生，生成的 HTML 如下所示：

<div class="section yellow" id="section1">
    <div id="content-wrap1" class="content-wrap">.
        <div id="content">
        <a href="whoweare.php">Who we are</a>
        <a href="whatwedo.php">Our team</a>
        <p>ABOUT US : Dance is a type of art</p>
    </div>
</div>

现在我想点击动态加载的链接来加载以下内容：

<div id="content">
    <a href="whoweare.php">Who we are</a>
    <a href="whatwedo.php">Our team</a>
    <p>Hi there! How are you?</p>
</div>

使最终的 HTML 看起来像这样：

<div class="section yellow" id="section1">
    <div id="content-wrap1" class="content-wrap">.
        <div id="content">
        <a href="whoweare.php">Who we are</a>
        <a href="whatwedo.php">Our team</a>
        <p>Hi there! How are you?</p>
    </div>
</div>

我听说我应该使用on()将 jquery 绑定到动态加载的内容。所以我做了以下事情：

('#section1').on("click", "#section1#content-wrap1#content a", function(){
    alert("1");
    toLoad = $(this).attr('href')+' #content';
    $('content-wrap1').load(toLoad);
}

问题1：这是正确的用法on()吗？因为当我点击链接时，我没有进入alert 1屏幕，页面只是导航到whoweare.php

问题2：如果我确实设法收到警报，理论上是否可以点击加载内容的链接来替换最初点击的链接？

4

2 回答 2

7

问题1：这是 on() 的正确用法吗？因为当我单击链接时，我没有在屏幕上收到警报 1，页面只是导航到 whoweare.php

代码

$(document).on("click", "#content a", function(){
        alert("1");
        toLoad = $(this).attr('href')+' #content';
        $('content-wrap1').load(toLoad);
})

问题2：如果我确实设法收到警报，理论上是否可以点击加载内容的链接来替换最初点击的链接？

于 2012-10-28T09:36:49.307 回答
2

问题 1

您的绑定语句应如下所示：

$(document).on("click", "#section1 #content-wrap1 #content a", function() {
    ...
});

请注意，我们现在绑定到document对象以容纳与#section1 #content-wrap1 #content a动态加载或以其他方式加载的第二个选择器 ( ) 匹配的任何和所有元素。

另外，请注意第二个选择器（空格）中的更正。

问题 2

理论上是否有可能点击加载内容的链接替换首先点击的链接？

是的。完全。

于 2012-10-28T09:35:22.990 回答