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

Jquery Binding Events to Multiple Instances on a Page

本文关键字：实例 事件 绑定 Jquery      更新时间：2023-09-26

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

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 Fiddle:

https://jsfiddle.net/42ssmu0t/

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

使用此：

 $(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");
        });
    });

我已经更新了fiddle 上的代码

更新的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");    
});
});
相关文章：