使用 jQuery 在同一类上发生多个事件答案

【问题标题】：Multiple event on same classes with jQuery使用 jQuery 在同一类上发生多个事件
【发布时间】：2012-03-09 12:42:14
【问题描述】：

我有多个使用 jQuery (.append) 动态生成的<textarea>。

当我添加一个新的<textarea> 时，我还会向它们添加一些<div class="action">，所以它看起来像这样：

<textarea>...</textarea>
<div class="action">Click to add action to text areas</div>

<textarea>...</textarea>
<div class="action">Click to add action to text areas</div>

<textarea>...</textarea>
<div class="action">Click to add action to text areas</div>

...

现在我想在用户单击 div“动作”时在 textarea 中添加一些内容

我是这样做的：

$(document).on("click",".action", function() //this will apply to all anchor tags
{ 
        $(this).prev('textarea')
        .val($('textarea')
        .val() + 'NEW TEXT');  
});

问题是它只在我的 div 之前的 <textarea> 内添加一次 "NEW TEXT"。

当我再次点击 ".action" div 时，什么也没有发生，所以我想多次点击 .action div 来一次又一次地添加我的新文本

有什么想法吗？

【问题讨论】：

标签： jquery click textarea append

【解决方案1】：

问题在于你的线路

.val($('textarea')

这是告诉 jQuery 查找 a 文本区域，而不是您正在修改其值的文本区域。在函数内创建一个本地变量应该会为您澄清：

$(document).on("click", ".action", function() { 
    var $ta = $(this).prev('textarea');
    $ta.val($ta.val() + "\nNew Text");
});

【讨论】：