在附加元素jQuery檢測事件

Question

我想在jQuery附加元素中檢測事件。

• 你怎麼做到這一點，
• 和/或爲什麼不是這方面的工作：

這裏是什麼，我已經嘗試了簡單的代碼片段。點擊「點擊我」後，輸入欄會觸發。點擊輸入後，警報不會觸發 - 此附加輸入上的其他事件也不會觸發。 :-(

腳本標籤下面的：

$(document).ready(function(){ 
    $(".clickme").click(function(){$(".extra").append('write: <input type="text" class="writesomething" />');}); 
    $("input").click(function(){alert("clicked")}); 
}); 

以下的體內：

<a href="#" onclick="return false" class="clickme">click me</a> 
<div class="extra"></div> 

Answer 1

做這樣的：

試試看：http://jsfiddle.net/eDDeZ/1/

$(".clickme").click(function(){ 
    $('<input type="text" class="writesomething" />') 
      .click(function(){alert("clicked")}) 
      .appendTo('.extra') 
      .before('write: '); 
}); 

正在創建的新元素，直接分配單擊處理程序，它附加到.extra，然後在其之前添加write:文本。

這樣不需要.live()。

---

編輯：

另一種選擇是使用.delegate()這將是更高效，.live()因爲它專注於一個特定的容器，而不是整個頁面。

試試看：http://jsfiddle.net/eDDeZ/2/

$(".clickme").click(function(){ 
    $('.extra').append('write: <input type="text" class="writesomething" />') 
}); 

$('.extra').delegate('input','click',function(){alert("clicked")}); 

• http://api.jquery.com/delegate/

Answer 2

使用方法現場的元素，而不是使用綁定動態綁定事件。

例如：

$("input").live('click',function(){alert("clicked")}); 

Answer 3

第二事件處理程序的結合時，DOM被加載發生 - 而沒有匹配的元件的存在。當你點擊鏈接時，會添加一個元素，但沒有附加事件處理程序。

有三種方式來解決這個問題：

1. 使用.live() API，而不是.click()

   $('input').live('click', function() { alert('clicked'); }); 
   

2. 添加事件處理程序中單擊事件。

   $(document).ready(function(){ 
       $(".clickme").click(function() { 
        $(".extra").append('write: <input type="text" class="writesomething" />'); 
        $("input").click(function(){ alert("clicked") }); 
       }); 
   }); 
   

3. 或者相似，但利用的jQuery鏈

   $(document).ready(function() { 
       $('.clickme').click(function() { 
        $('<input>') 
         .attr('type','text') 
         .addClass('writesomething') 
         .click(function() { alert('clicked!'); }) 
         .appendTo('.extra'); 
       }); 
   });