生成特定div的输入元素

Question

我想在单击的特定div中添加输入字段。

我有一长串div，如下所示：

<div class="edit">1</div>
<div class="edit">10</div>
<div class="edit">22</div>
<div class="edit">5</div>

我的javascript / jquery看起来像这样：

$('body').on('click', '.edit', OnEdit);

function OnEdit(e) {
    $('.edit').append('<input type="text" name="amount"/>');
}

当我点击时，问题是它将输入字段添加到所有div。我希望它只将输入字段添加到专门点击的div中。我怎么能这样做？

Answer 1

回调中的

ThisBinding或this，即OnEdit将指向触发事件的当前元素。

因此请使用this参考

function OnEdit(e) {
    $(this).append('<input type="text" name="amount"/>');
}

Answer 2

您可以像这样简化代码：

$('.edit').click(function(){
    $(this).append('<input type="text" name="amount"/>');
});

jsFiddle Demo

注意：

1. 将click事件专门绑定到所有具有类edit的div

2. 正如Amit所指出的，使用$(this)对象来引用触发click事件的特定div，并附加到该事件。