如何使用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你可以用動態創建的內容再一次