Question

我认为，我已经完成所有设置，但仍然无效 - 我正在使用input删除标记添加新的html元素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');
});

insertAfter - find - on（） - 不工作

3 个答案: