如何使用javascript加载功能两次？ （负载加载）

Question

我创建了一个页面，我使用onclick加载函数将php文件加载到div中。现在我想从之前导入的文件中将另一个文件加载到另一个div中。

所以例如：
[类别1 |第2类|第3类|第4类]
[这里得到的文件1是从一个按下的类别导入的，其中包含一个href] [这是第二个div，它将从href导入另一个文件，该文件是从第一个导入的文件中点击的]

不知何故，我不能让它为第二次导入工作。首先进口工作。我使用第一次导入的相同代码进行第二次导入（只是其他id＆＃39; s（＃））。

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

<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.ready（func ...在某些时候你的代码不起作用的问题？这个问题基本上是同一个问题。当你运行代码时没有调用'ready '你的脚本调用的id不在页面上，所以它找不到它。当你动态创建新元素时，当你的脚本第一次运行时它不在页面上，所以它不能“看到”它。

简单的解决方法是在页面准备就绪时选择页面上存在的元素，然后再查看该元素。假设#main最初是在你的文件中加载的，而#message是你想要在加载后点击的一些动态内容，这应该可以解决问题。

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

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

Jquery event handler not working on dynamic content

jquery events on dynamically loaded content

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