Question

这可能是非常明显的事情，但我是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 code：

<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（只是为了确保功能正常）并且它工作正常。

任何人都可以给予的帮助将不胜感激。

Answer 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");
    });

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

Answer 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");
}

jquery.load（）的问题

2 个答案: