如何两次使用javascript函数？(负载)

Question

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

例如：

第1类第2类第3类第4类

这里获得了从按下的类别导入的文件1，其中包含一个href

不知何故，我无法使它为第二次进口工作。第一次进口工程。对于第二个导入，我使用来自第一个导入的相同代码(只是其他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.ready的问题。你的代码不起作用了吗？这基本上是同一个问题。当您在没有调用“准备”的情况下运行代码时，您的脚本调用不在页面上，因此它找不到它。动态创建新元素时，脚本第一次运行时它不在页面上，因此它无法“看到”它。

简单的解决方法是在页面准备好时在页面上选择一个确实存在的元素，然后在后面查看该元素。假设#main最初加载在您的文件中，并且#message是您想要在其加载后单击的一些动态内容，那么这应该可以做到这一点。

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

您还可以使用任何其他更高级别的元素，比如“document”或“body”等等。但是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