生成後續HTML的jQuery HTML生成

-2

我對jQuery和JavaScript比較陌生，我試圖開發一個網頁，做一些可能不完全合理的事情，但從我所瞭解的jQuery看起來像是快速和容易的設計。該代碼是這樣的：生成後續HTML的jQuery HTML生成

<script> 
    $(document).ready(function() { 

     $("button").click(function() { 
      $("#target").html('<div><p>Some HTML</p><div id="clickHere"></div><div id="target2"></div></div>'); 
     }); 

     $("#clickHere").click(function(){ 
      $("#target2").html('<p>Replacement HTML</p>'); 

     }); 

    }); 
</script> 

<div id="target"></div>

有造型元素和標識符在實際的代碼不同，但總的功能我要去的是用戶選擇的內容區域。該內容然後由第一次點擊函數調用生成。在該內容中，我希望允許用戶從中進行選擇，然後生成最終級別的內容。我猜測有一些潛在的機制，不會允許「target2」點擊事件觸發從「目標」div動態生成的內容。但如果我只是做錯了什麼，我很感激幫助！

來源

2015-08-27 ChristianKid044

你能花一點時間，實際設置你的文章的格式有點可讀嗎？另外，雖然我欣賞好的想法，但祝福和稱呼不是必要的，並且傾向於分散讀者對問題內容的注意力。 – David

瀏覽器的控制檯*可能*試圖告訴你代碼中的語法錯誤。您嘗試多次調用jQuery函數而不引用'$'對象。 – David

你沒有調用jQuery：'$（'button'）'，'$（'＃clickHere'）'... – War10ck

有一對夫婦在這裏的問題...

首先，你有語法錯誤，當你做這樣的事情：

("button")

要調用需要引用jQuery函數jQuery對象：

$("button")

其次，當你這樣做在文檔的ready處理程序：

$("#clickHere")

這只是要找到這在當時存在匹配的元素。由於沒有，所以沒有點擊處理程序被綁定到該元素。相反，您希望使用帶有.on()函數的事件委託來綁定到不變的頂級元素。事情是這樣的：

$(document).on('click', '#clickHere', function(){ // ... });

我解釋了很多here（還有其他偉大的，比較流行的解釋here），但本質上，你需要做的是一個事件附加到一個存在於一個頁面元素時間並不會改變。（在這種情況下，document會很好地完成這項工作，但任何常見的父元素都可以）。由於事件通過DOM「冒泡」，它仍然會捕獲這些點擊。但是這樣你就不必重新將處理程序重新添加到將在文檔生命中稍後添加的元素。（這是你與那些div元素做什麼）

第三，這些都將導致問題：

<div id="clickHere">

只要存在具有相同id上的多個元素該頁面，HTML由定義無效，並且任何JavaScript的行爲將不確定。它可能工作，或者它可能不會。

相反，在這種情況下使用類：

<div class="clickHere">

並相應地改變你的jQuery選擇：

$(document).on('click', '.clickHere', function(){ // ... });

（有可能是更多的問題，但你需要以至少糾正這些去）

來源

2015-08-27 18:42:22 David

啊，謝謝。如果我可能會問，在內容的每個級別被覆蓋之後重新定義按鈕元素是否是可怕的做法？當HTML被替換時，DOM是否支持每個元素？ – ChristianKid044

@ ChristianKid044：我不是100％確定你的意思，但是如果你從DOM中刪除了任何元素，並用另一個替換它，即使是相同的元素，附加到第一個元素的任何處理程序現在都消失了。處理程序會附加到元素，而不是選擇器。 – David

Runni ng使用jQuery動態點擊事件需要一個on()函數E.G.

$("*").on("click","#target2",function(){ 
.....do somthing..... 
});

我想這就是你要找的。

如果您還需要其他任何東西，請隨時提問。

來源

2015-08-27 18:48:29 AkrilBH

生成後續HTML的jQuery HTML生成

回答

相關問題