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

【问题标题】：insertAfter - find - on() -- not workinginsertAfter - find - on() - 不工作
【发布时间】：2013-03-11 18:21:15
【问题描述】：

我想，我已经设置好了，但它仍然无法正常工作 - 我正在添加新的 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>

它插入得很好，但我无法删除新添加的元素（警报未触发）。为什么是这样？

非常感谢

【问题讨论】：

将find 更改为filter

标签： javascript jquery html

【解决方案1】：

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

改用.filter()：

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

【讨论】：

你能给我一点提示，告诉我如何删除X旁边的输入字段。 ?
@doniyor $(this).prev() 将选择<input> 元素，其中click 事件处理函数中的this 是您单击的<a> 元素。然后你可以调用任何 jQuery 函数——比如.remove()——就可以了。

【解决方案2】：

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

【讨论】：

@doniyor：不要在 JavaScript 中添加太多 HTML。使用模板或其他东西。

【解决方案3】：

试试这个

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

【讨论】：

该范围内没有定义 jquery 变量 - 您可能指的是 jQuery，但您不能在此调用 .on()，您需要先选择元素。