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'); 
});