insertAfter - 找到 - 上（） - 不工作

Question

我想，我已經設置了所有，但它仍然不工作 - 我正在追加新的html元素input與X刪除標誌。如果我點擊新添加的X符號，則應刪除新添加的輸入。我所做的是：

function addmore(){ 
    $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>').insertAfter('#more').find('.del').on('click', function(){ 
    alert('test'); 
    }); 
} 

我的HTML是：

<a href="javascript:addmore()"> add more </a> 
<p id="more"></p> 

它插入很好，但我不能刪除新添加的元素（警報不點火）。爲什麼是這樣？

非常感謝

Answer 1

的.find()函數查找是內當前匹配的元素集合的元素，但不包括那些匹配的元素。您的<a class="del">元素是匹配元素集的一部分，因此不會被拾取。

使用.filter()代替：

....filter('.del').on('click', function() {...}); 

Answer 2

試試這個

function addmore(){ 
     var element = $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>').insertAfter('#more'); 
     element.filter(".del").on('click', function(){ 
     alert('test'); 
     }); 
    } 

Answer 3

你.find()選擇實際上並不返回任何東西。如果你看一下jQuery的如何處理你的HTML字符串：

> $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>') 
[<input type=​"file" name=​"bild[]​">​, #text, <a class=​"del">​X​</a>​, #text, <br>​] 

你會看到，它實際上解析每個那些元素和文本節點作爲一個單獨選擇元素。 .find()不會返回任何東西，因爲它只會期待通過這些元素的後代，而不是元素本身：

> $('<input type="file" name="bild[]"/> <a class="del">X</a> <br/>').find('.del') 
[] 

我的是這樣開始：

$('<input type="file" name="bild[]"/>').insertAfter('#more'); 
$('<a class="del">X</a>').insertAfter('#more').on('click', function(){ 
    alert('test'); 
}); 

$('<br/>').insertAfter('#more'); 

或做從自動處理點擊事件，即使對於還不存在的元素開始一個通用的選擇：

$('#more').on('click', '.del', function() { 
    alert('test'); 
});