jquery.load() 的问题 [重复]答案

【问题标题】：Issue with jquery.load() [duplicate]jquery.load() 的问题 [重复]
【发布时间】：2013-05-05 13:48:04
【问题描述】：

这可能很明显，但我是 jquery 新手，所以不知道问题出在哪里。

我正在使用 php/jquery/html 等创建一个简单的论坛（看看是否可以）。当它第一次打开时，它会显示论坛列表（工作正常）和其他内容的空框（div） .当您单击列表中的论坛时，它会调用 showForum(id) 并发出警报（只是为了让我知道它正在工作）并将论坛中的线程列表加载到一个空的 div 中（工作正常）。问题是当我尝试加载一个线程（通过单击它）时，什么也没有发生，甚至没有警报。

jQuery 代码：

$(document).ready(function() {
    $('.flink').click(function() {
        var id = $(this).attr('id');
        showForum(id);
        alert("Forum opened");
    });                    

    $('.tlink').click(function() {
        var id = $(this).attr('id');
        showThread(id);
        alert("Thread opened");
    }); 
});

function showForum(id) {
    $('.topic-container').load("showforum.php", {
    'f': +id
    });
    showLinks(id, 1);
}

function showThread(id) {
    $('.entry-container').load("showthread.php", {
    'thread': +id
    });
    showLinks(id, 2);
    alert(id);
}

HTML 代码：

<html>
    <head>
        <title>
            Title
        </title>
    </head>
    <body>

        <table class="out-table">
            <tr>
                <td rowspan="6" class="side-menu">
                    <table class="side-header">
                        <?php  // Code to get stuff from DB, flinks are created in here. tlinks are created with more php in showforum.php ?>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="topic-container">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="top-links">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="entry-container">
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

我检查了类名以确保它们是正确的。我点击了一个论坛公开电话 showThread（只是为了确保该功能正常工作）并且工作正常。

任何人都可以提供任何帮助，我们将不胜感激。

【问题讨论】：

绑定处理程序时，您需要使用.on() 将处理程序委托给DOM 中尚不存在的元素。
您使用的是什么版本的 jQuery？如果它是 1.7+，@PSL 答案应该可以工作（保证任何添加的元素都将绑定到事件），否则，您必须在加载回调函数中挂钩线程单击事件（完成）。
@rivarolle 在 jQuery v1.3 - v1.6 中，.on 的推荐替代品是 .delegate。
@apsillers 是的，肯定更好。

标签： javascript jquery

【解决方案1】：

您需要使用on 为通过负载添加的内容进行事件委托。您的点击事件仅适用于 DOM 中存在的元素。因此，您需要将事件附加到父元素（已存在）或文档元素，因此稍后添加的元素将具有“委托”可用的事件。

See .on()

Sample Demo

在你的情况下，我猜.tlink 稍后会在load 期间添加到 DOM 中。但是您甚至在 .tlink 存在之前就将其附加到了它，因此这些绑定实际上是无效的。

$(document).on('click','.flink', function() {
        var id = $(this).attr('id');
        showForum(id);
        alert("Forum opened");
    });                    

    $(document).on('click','.tlink', function() {
        var id = $(this).attr('id');
        showThread(id);
        alert("Thread opened");
    });

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型-视图-控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。

【讨论】：

我已经尝试过这段代码（以及 danda1man 评论中的代码），但都不起作用，现在单击 flink 时不会调用 showForum
document 真的不应该在这里使用，除非绝对需要。在这种情况下，它似乎不是loaded 的两个元素可以轻松使用。
@JamesMontagne 我同意不应该使用文档，但我在答案中提到了它，因为我不知道 OP 的 DOM 结构。 event to the parent (which already exists) or the document element
@user2371266 你用的是哪个版本的jquery，能不能显示一下你的html结构...
完美运行，谢谢:)

【解决方案2】：

您的点击需要使用 .on 处理程序，因为您的内容是动态加载的：http://api.jquery.com/on/

对于你的代码试试这个：

$(document).on("click", ".flink", fLink);
function fLink(e) {
var id = $(this).attr('id');
        showForum(id);
        alert("Forum opened");
}

$(document).on("click", ".llink", lLink);
function lLink(e) {
var id = $(this).attr('id');
        showThread(id);
        alert("Thread opened");
}

【讨论】：