多個事件綁定不上的動態內容

工作，我有一個像「輸入場分量」：多個事件綁定不上的動態內容

<div class="input-multilingual multilingual-field"> 
    <div class="input-multilingual-prepend"> 
     <input type="text" value="" name="nameVariants[0].texts[nl_BE]"> 
    </div> 
    <div class="input-multilingual-prepend"> 
     <input type="text" value="" name="nameVariants[0].texts[en_GB]"> 
    </div> 
</div>

，我有附一個焦點/模糊的事件這一點，這在頁面加載的工作原理：

$(".multilingual-field").on({ 
     focus: function() { 
      $(this).parents(".multilingual-field").addClass("focus"); 
     }, 
     blur: function() { 
      $(this).parents(".multilingual-field").removeClass("focus"); 
     } 
    }, ":input");

問題在於，它被包含在div中，一旦添加了新的「輸入字段組件」，內容就會被AJAX重新渲染。該行動後，焦點/模糊方法不再有效。

我認爲在.on(...)上加上":input"作爲參數，這可以適用於動態內容嗎？我錯過了什麼？

更新

好像如果我聽上$(document).on({...}, ".multilingual-field :input")它的工作原理 - 這是爲什麼？ :-)

來源

2013-07-02 janhartmann

看起來像你已經回答了你自己的問題。在你的更新中，它的工作原理就是這樣，因爲這是'on（）'函數的[期望用法]（http://api.jquery.com/on/）。您將相同的事件委託給與'：input'選擇器相匹配的'document'的每個後代，這聽起來像您所需要的。 –

你有一個多語種領域的元素（S），也有父母與多語言領域類？我相信這就是你的JS所說的，但是你的HTML說了不同的東西。 – asafreedman

jQuery中的事件處理程序在執行「on」函數時附加到特定的DOM節點。當DOM節點被刪除並重新創建時，它將失去它的事件監聽器。

改爲使用「live」功能。

$(".multilingual-field").live("focus", 
     function() { 
      $(this).parents(".multilingual-field").addClass("focus"); 
     } 
);

來源

2013-07-02 14:14:54 semao

多個事件綁定不上的動態內容

回答

相關問題