如何使用JavaScript负载功能两次?(加载负载)

Question

我已经创建了一个页面，其中使用OnClick Load函数将PHP文件加载到DIV中。现在，我想从我之前导入的文件中加载另一个文件。

所以：
[类别1 |类别2 |类别3 |类别4]
[这里从包含HREF的按压类别中导入的文件1] [这是第二个DIV，将从HREF导入另一个文件，该文件从第一个导入的文件中单击[/p>]

不知何故，我无法为第二个导入而使用。第一个导入作品。我使用第二个导入的第一个导入中使用相同的代码(只是其他ID(＃((。

第一个文件的一部分要导入：

<li ><a href="#" id="campaign" >Campaign</a ></li >
<li ><a href="#" id="resources" >Resources</a ></li >
<li ><a href="#" id="gang" >Gang</a ></li >
<li ><a href="#" id="gambling" >Gambling</a ></li >
<li ><a href="#" id="off-topic" >Off-Topic</a ></li >
<script >
$(document).ready(function () {
    // Forum categories
    $("#campaign").on("click", function () {
        $("#main").load("forum/campaign.php");
    });
    $("#resources").on("click", function () {
        $("#main").load("forum/resources.php");
    });
    $("#gang").on("click", function () {
        $("#main").load("forum/gang.php");
    });
    $("#gambling").on("click", function () {
        $("#main").load("forum/gambling.php");
    });
    $("#off-topic").on("click", function () {
        $("#main").load("forum/off-topic.php");
    });
    });
</script >

第二个文件的一部分要导入：

<a href="#" class="list-group-item small" id="message" style="background-color:black; color:white;" ><span class="glyphicon glyphicon-pushpin" aria-hidden="true" ></span > | <?php echo $sticky['header']; ?> </a >
    <script >
    $(document).ready(function () {
        // Forum categories
        $("#message").on("click", function () {
            $("#getmessage").load("forum/getmessage.php");
        });
</script >

Answer 1

动态创建内容的常见问题。

您可能忘记了忘记包括$ document。"您的脚本调用的ID不在页面上，因此找不到。>

轻松的解决方法是在页面准备就绪时确实存在的页面上确实存在的元素，然后在后面查看内部。假设#main最初是在您的文件中加载的，并且#message是您要在加载后要单击的一些动态内容，那么这应该可以解决问题。

$(document).ready(function () {
        // Forum categories
        $("#main").on("click", "#message", function () {
            $("#getmessage").load("forum/getmessage.php");
        });
});

您还可以使用任何其他更高级别的元素，例如"文档"或"正文等"。但是，页面上的内容越少，必须查看更快的内容应该运行运行。还有许多其他解决问题的堆栈溢出问题。这是Google结果顶部的两个：

jQuery事件处理程序不处理动态内容

动态加载内容上的jQuery事件

Answer 2

一个简单的优雅解决方案将创建一个可以处理所有事件的函数：

var myFunc = function ()
{
$("#campaign").on("click", function () { $
("#main").load("forum/campaign.php"); }); 
$("#resources").on("click", function () { $.    ("#main").load("forum/resources.php"); }); 
$("#gang").on("click", function () { $("#main").load("forum/gang.php"); }); 
$("#gambling").on("click", function () { $("#main").load("forum/gambling.php"); }); 
$("#off-topic").on("click", function () { $("#main").load("forum/off-topic.php"); });
}

然后，从$(document).ready您可以致电myFunc

，从$("message").on您可以再次致电myFunc