如何从单击按钮获取值

how to get the value from button on click

本文关键字：获取 按钮 单击      更新时间：2023-09-26

我有一些按钮，这些按钮是根据存在的电话号码数量动态创建的。假设我在数据库中有 3 个名称，因此将有三个按钮。因此，当我单击第一个按钮时，它应该给出第一个按钮的值，如果单击第二个按钮，则应显示第二个按钮值。这是简单的jsfiddle，描述了我的要求。我想为每个按钮分配一个不同的ID，应该是电话号码。在jsfiddle中，当我单击特定按钮时，会弹出警报，但它没有给出任何值。

我确实喜欢这个

$('.btn').click(function(){ 
var number1 = $('#s2').val();
alert(number1);
});
你必须使用

jQuery 的 on() 方法使用事件委托。从其文档中：

提供选择器时，事件处理程序称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，而只会对与选择器匹配的后代（内部元素）调用处理程序。jQuery 将事件从事件目标向上冒泡到附加处理程序的元素（即，最内层到最外层元素），并为该路径上与选择器匹配的任何元素运行处理程序。

在您的情况下，您需要将 .btn 点击事件委托给在该元素动态添加到页面之前存在的祖先：

$('body').on('click', '.btn', function() {
    var number1 = $('#s2').val();
    alert(number1);
});

越接近 .btn 元素越好，因此，除非文档的body是最接近的非动态祖先，否则您需要将其更改为更接近的内容。

编辑：评论中的进一步问题：

我可以获取每个按钮的 ID 吗

要获取每个按钮的id，只需使用 this.id ：

$('body').on('click', '.btn', function() {
    var id = this.id;
    alert(id);
});

编辑2：评论中的进一步问题

所以正如我所说，ID是数字。因此，如果我单击按钮 1，那么它将在输入字段中打印 s1。你能告诉我该怎么做吗？

由于您的input具有"数字"的id，因此您可以简单地使用 jQuery 的 .val() 方法将input的值设置为单击按钮的id：

$('body').on('click', '.btn', function(){ 
    $('#number').val(this.id);
});

工作 JSFiddle 演示。

$(document).on('click', '.btn', function(){ 
   alert($(this).val()); 
});

应该工作。"on"是一种处理动态放置元素的方式。

在按钮输入中放置值属性

  <button type="button" class="btn" value="test2" >test</button>
  <button type="button" class="btn" value="test1" id="s1">test</button>
  <button type="button" class="btn" value="test" id="s2">test</button>

然后使用脚本

 $('.btn').on('click', function() {
       var number = $('#s2').val();//get value
 });

如果你想获取点击按钮的id，你应该使用attr：

$('.btn').click(function(){ 
   var number1 = $('#s2').attr('id');
   alert(number1);
});
相关文章：