Jquery 将事件绑定到页面上的多个实例答案

【问题标题】：Jquery Binding Events to Multiple Instances on a PageJquery 将事件绑定到页面上的多个实例
【发布时间】：2016-08-30 03:35:03
【问题描述】：

我有一个完全按照我需要的方式工作的脚本，只是现在，我无法在页面上复制它 - jquery 采用 textarea 框并根据按下的按钮对其进行编辑，但是我需要每个 textarea 框都有它有自己的一组按钮。这是我的代码：

HTML 代码：

<textarea style="width:500px; height: 150px;" id="text">This is some text</textarea>
<br />
<input type="button" value="Click Me" id="button" />
<input type="button" value="Click Me 2" id="button2" />

<br /><br />

<textarea style="width:500px; height: 150px;" id="text">This is some text</textarea>
<br />
<input type="button" value="Click Me" id="button" />
<input type="button" value="Click Me 2" id="button2" />

JavaScript 代码：

$(function () {
$('#button').on('click', function () {
    var text = $('#text');
    text.val(text.val() + "\n\nafter clicking");    
});
$('#button2').on('click', function () {
    var text = $('#text');
    text.val(text.val() + "\n\nafter clicking 2");    
});   });

JS 小提琴：

https://jsfiddle.net/42ssmu0t/

非常感谢您帮我解决这个问题！

【问题讨论】：

ID 必须是唯一的，请检查您的 HTML 代码
但是我需要为每个textarea重复JS函数吗？
nop，只需使用 class 选择器。例如，为每个输入添加一个类“my-button”，然后在 jquery 中可以做到$('.my-button').on('click', function () {
我很抱歉不理解......如果我将类设为我的按钮，每个按钮都已经有一个类，因为有多个按钮 - 在我的示例中，我有 button1、button2 .. .我的textarea是txt，如果我在那里创建另一个类，比如txt1、txt2，我不知道如何将它添加到javascript中？

标签： javascript jquery html binding textarea

【解决方案1】：

使用这个：

 $(function () {
        $('*#button').on('click', function () {
            var text = $('#text');
            text.val(text.val() + "\n\nafter clicking");
        });
        $('*#button2').on('click', function () {
            var text = $('#text');
            text.val(text.val() + "\n\nafter clicking 2");
        });
    });

【讨论】：

【解决方案2】：

我已经更新了小提琴上的代码

Updated Fiddle

这里是更新的代码：

$(function () {
$('*#button').on('click', function () {
    var text = $(this).prevAll('#text').eq(0);
    text.val(text.val() + "\n\nafter clicking");    
});
$('*#button2').on('click', function () {
    var text = $(this).prevAll('#text').eq(0);
    text.val(text.val() + "\n\nafter clicking 2");    
});
});

【讨论】：

您好 - 非常感谢 - 我将你的 JS 小提琴复制到我的上并添加了一个附加功能，但它不起作用 - 你介意看看我更新的小提琴，看看我哪里出错了吗？这是我将您的代码添加到我的代码的地方：jsfiddle.net/yLotfgfh