jquery：添加一個功能新的div

Question

這是我的第一篇文章，所以要溫和。 :)

我有我的頁面上的鏈接。

我想要的鏈接，當點擊創建一個新的div。

新的div應該包含相同的鏈接，用於創建這個div， ，這樣我就可以繼續創建包含相同鏈接的新div。

這裏是我的代碼：

<script type="text/javascript"> 

    $(document).ready(searchCriteria); 
    $(document).ready(loadSearchCriteria); 

    function searchCriteria() { 
     $(".test").load("searchCriteria.html"); 
    } 

    function loadSearchCriteria() { 
     $(".test1234").click(function() { 
      $(".test1234").load("searchCriteria.html"); 
      function loadNewClick() { 
       var $newClick = $('<div class="test1234"></div>'); 
        $(".content").append($newClick); 
      } 
     }); 
    }; 

</script> 

我使用jQuery，1.4.2.min.js

我是新來的jQuery，因此任何提示，將appretiated。 THX :)

Answer 1

你需要打電話給你的loadNewClickwhen完成$(".test").load("searchCriteria.html");

$(".test").load("searchCriteria.html", function(){ 
    alert('completed'); 
    //EDIT:: this is your load new click function 
    var $newClick = $('<div class="test1234"></div>'); 
    $(".content").append($newClick); 
}); 

Answer 2

試試這個：

$(function() { 
    //document ready 
    $(".test").load("searchCriteria.html"); 
    var $newClick = $('<div class="test1234">Sample div</div>'); 
    $(".content").append($newClick); 
    $($newClick).live("click", function() { 
     $(this).load("searchCriteria.html"); 
    }); 
});​ 

Answer 3

所以，你要這些新追加的.test1234元素具有相同點擊事件？您可以使用.on()至代表點擊事件到類。這有效地將它綁定到任何獲得該新類或舊類的類（.on()替換最近版本的jQuery中的.live()）。

---

但委託事件有（適度）的開銷，對於像這樣簡單的事情來說，這可能過分。在創建新元素時，可以將創建它的函數綁定到它。將事件綁定到像這樣的新創建的元素是方便的"lesser known" jQuery trick。

這裏的最重要的一點：綁定，創建了新的div到新創建的div的功能，像這樣（對可讀性新線點擊）：

function somefunction() { 
    var $newClick = $('<div class="test1234"></div>') 
    .click(somefunction); 
    $(".content").append($newClick); 
} 

（你也可以使用.click(function() { some code })，或寫爲$('<div/>').addClass('test1234').click(somefunction);，或什麼的，這是非常靈活的）

我測試了這個時候:)這裏是一個jsfiddle展示全碼（使用.text()，而不是​​。

我想你在您的評論中提到的問題是一個不同的問題與您的代碼的結構方式 - 看看在的jsfiddle代碼的修改和註釋，想想什麼時候發生的事情。

改變的事情，打破它，直到它有道理重裝吧:)。

---

---

友情提示從一個JavaScript的編碼設計到另一個 - 關於學習真正的編程是讓你的頭部周圍的時機和運動部件（每個事物是在每個點什麼）最難的事情。請記住，在jQuery的東西像.click()綁定事件（click()僅僅是bind('click')一個快捷方式）。當我學習使用.bind('click)而不是.click()（和bind('mouseover')等等）時，我發現它很有幫助，因此當我讀回代碼時，始終直觀地看到發生了什麼以及什麼時候發生了什麼。

此外，使用console.log()了很多。記錄下所有內容並觀察出現的情況。而且，當你的文本編輯器/ jsfiddle/firebug等等是一個無限大寫生，告訴你什麼時候不能工作：這是一件很棒的事情，嘗試一切，犯很多錯誤！這是學習的最佳方式。