Question

我正在使用以下JQuery代码来捕获单个按钮上的点击次数：

$(function () {

    //Set up click event on the Remove button
    $('#ButtonRemove').click(function (event) {
    //Process button click event
    }
}

HTML本身就是这样的：

<input type="submit" name="ButtonRemove" value="Remove Now" id="ButtonRemove" />

但我的一个页面是动态生成的，这意味着它可以有一个可变数量的Remove Now按钮，每个按钮都有以下HTML：

<input type="submit" name="ButtonRemove_01" value="Remove Now" id="ButtonRemove_01" />
<input type="submit" name="ButtonRemove_02" value="Remove Now" id="ButtonRemove_02" />
...
and so on

那么我可以调整我的JQuery语句来捕获一个方法中的所有按钮吗？

编辑：哇。谢谢大家！有很多方法可以做到这一点。 JQuery非常方便！

Answer 1

当然！使用jQuery on() method和委派：

HTML：

<div id="Buttons">
<input type="submit" name="ButtonRemove_01" value="Remove Now" id="ButtonRemove_01" />
<input type="submit" name="ButtonRemove_02" value="Remove Now" id="ButtonRemove_02" />
</div>

脚本：

$("#Buttons").on("click","input",function(event){
  $(this)...
});

您还可以使用更具体的选择器，例如"input[id^='ButtonRemove_']"将定位所有ID为以ButtonRemove _

开头的按钮

Answer 2

使用按钮的classname，以便jquery selctor选择并将事件应用于与className匹配的所有事件。

的js

$(function () {

    //Set up click event on the Remove button
    $('.btnRemove').click(function (event) {
    //Process button click event
    alert(this.id);
    }
});

HTML

<input type="submit" class="btnRemove" name="ButtonRemove_01" value="Remove Now" id="ButtonRemove_01" />
<input type="submit" class="btnRemove" name="ButtonRemove_02" value="Remove Now" id="ButtonRemove_02" />

如果这些是使用JS在页面上动态生成内容的一部分，那么您可以使用on使用事件委派，以便使用此类名动态创建的按钮获取从父级或document委派的事件。我在这里提到了文档，但是使用DOM中已经存在的元素作为容器。

    //Set up click event on the Remove button
    $(document).on('click', '.btnRemove' ,function (event) {
    //Process button click event
       alert(this.id);
    });

或

$(function () {
$('contanerSelector').on('click', '.btnRemove' ,function (event) {
        //Process button click event
          alert(this.id);
        });
});

Answer 3

为每个按钮指定相同的类或使用“submmit”类型

<input type="submit" name="ButtonRemove_01" class='classname' value="Remove Now" id="ButtonRemove_01" />
<input type="submit" name="ButtonRemove_02" class='classname' value="Remove Now" id="ButtonRemove_02" />
...

JS使用类

$(".classname").click(function(){

  ///your code
});

JS使用类型

$("input:submit").click(function(){

  ///your code
});

Answer 4

有几种方法。如果你想捕获所有提交按钮的事件。

$(":submit").on("click", function() {
 // Carry on
});

但似乎您正在尝试选择以ButtonRemove开头的元素。所以

$("[name^='ButtonRemove']").on("click", function() {
    // This function will apply on the elements whose name start with "ButtonRemove"
});

一组按钮上的JQuery单击事件

4 个答案:

的js

HTML