的jQuery - 選擇動態創建的div

首先，我的HTML：

<div id="taskinput"> 
    <form> 
     <input id="taskinput-box" type="text"></input> 
     <input type="submit"></input> 
    </form> 
</div><!-- end taskinput --> 
<div id="taskoutput"></div><!-- end taskoutput -->

我從用戶使用.append同時創建一個新的類創建在#taskoutput內容，.task。

$("#taskinput").submit(function() { 
    var tasktext = $('#taskinput-box').val() 
    $('#taskoutput').append('<div class="task">'+tasktext+'</div>'); 
    $('#taskinput-box').val(""); 
    return false; 
});

上面的代碼工作正常;當我嘗試選擇創建的div時遇到麻煩。下面的代碼不起作用：

$(".task").click(function() { 
    $(this).slideUp(); 
});

我錯過了什麼？

來源

2012-05-23 steve-er-rino

感謝所有快速回復，每個人都非常有幫助 –

你必須使用一個delegate event像on：

$('#taskoutput').on('click', '.task', function(){ 
    $(this).slideUp();  
});

@salek DEMO但on

閱讀on docs：

事件處理程序是僅限於當前選擇的要素;它們必須在代碼調用.on（）時存在於頁面上。爲確保元素存在且可以選擇，請在文檔就緒處理程序中爲頁面上HTML標記中的元素執行事件綁定。如果將新的HTML注入頁面，請在將新的HTML放入頁面後選擇元素並附加事件處理程序。或者，使用委託事件來附加事件處理程序，如下所述。

委託事件的優點是它們可以處理後來添加到文檔中的後代元素的事件。通過選擇在委託事件處理程序附加時保證存在的元素，可以使用委派事件來避免頻繁附加和刪除事件處理程序的需要。該元素可以是模型 - 視圖 - 控制器設計中的視圖的容器元素，例如，如果事件處理程序想要監視文檔中的所有冒泡事件，則可以是文檔。在加載任何其他HTML之前，文檔元素在文檔的頭部可用，因此在不等待文檔準備就緒的情況下在其中附加事件是安全的。

來源

2012-05-23 00:48:08 gdoron

非常感謝 - 我知道我錯過了一些東西。 –

使用jquery .on()來綁定在運行時生成的HTML上的事件。就像這樣：

$("#taskoutput").on({ 
    click: function() { $(this).slideUp(); } 
}, '.task');

來源

2012-05-23 00:47:47 frenchie

$(".task").click(...說：「找到所有當前存在的.task元素和事件處理程序綁定到他們。如果以後創建的元素，如在你的榜樣，他們不會有綁定的事件處理程序。

您需要將事件處理程序，將永遠存在，因爲祖先元素被告知他們的後代事件的元素綁定，點擊.task元素總會觸發#taskoutputclick處理jQuery的on方法使這個簡單的給你：。

$('#taskoutput').on('click', '.task', function(){ 
    $(this).slideUp();  
});

來源

2012-05-23 00:50:23 lonesomeday

我處於類似的情況，並嘗試了您的解決方案。但是我得到一個未被捕獲的異常「對象沒有'''''。有任何想法嗎？ –

沒關係，從http://stackoverflow.com/questions/2124744/jquery-remove-parent-not-working-on-dynamically-created-divs我發現靈魂工程。也就是說，我不得不使用.live（'change'，function（） –

你需要使用的是live（'click'，function（）{...

我在 http://jsfiddle.net/2ZmF4/

$(".task").die().live('click', function() { 
    $(this).slideUp(); 
    return false; 
});

創建的jsfiddle你，你將需要決定是否需要呼叫取決於你的場景不行了......我thorwed它在那裏反正...

來源

2012-05-23 00:55:48 salek

請不要!!!!'live'已被棄用 – gdoron

yep「.on」它就是！使用lonesomeday的版本 – salek

的jQuery - 選擇動態創建的div

回答

相關問題