insertAfter - find - on() --不工作

Question

我想，我已经全部设置好了，但是它仍然不能工作--我正在添加带有X删除符号的新的html元素input。如果我单击新添加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');
});