如何使用javascript加载函数两次？ （load in load）

Question

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

因此，例如：
[类别1 |类别2 |类别3 |第4类]
[这里有文件1，从其中包含的HREF压制类别进口] [这里是一个将其从第一导入文件点击]

不知怎的，在href导入其他文件中的第二个div，我不能让它为第二次导入工作。首先导入工作。我使用第一次导入时的相同代码进行第二次导入（只是其他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

一个常见的问题致电myFunc。

你可能已经忘记了包括$的document.ready（FUNC ......在某个点的问题，您的代码不起作用？这本质上是相同的问题。当你没有调用上运行代码“准备好”你的脚本调用ID是不是在页面上，因此无法找到它。当你动态地创建新元素它不是在页面上，当你的脚本第一次运行，因此它不能‘看到’它。

简单的解决方法是选择在页面上确实存在，当页面准备好，然后看里面，后来上的元素。假设#main最初加载在你的文件和#message是要点击一些动态内容它加载后，这应该做的伎俩。

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

您还可以使用任何其他更高级别的元素，例如'document'或'body等等。但是页面jquery的更少部分必须注意更快的事情应该运行。 有许多其他堆栈溢出问题可以解决这个问题。这里有两个对谷歌搜索结果的顶部：

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你可以用动态创建的内容再一次