2

我正在使用以下 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 非常好用！

4

4 回答 4

5

对按钮使用类名，以便 jquery 选择器选择并将事件应用于所有匹配类名。

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);
        });
});
于 2013-05-16T18:57:37.273 回答
5

当然！使用带有委托的jQuery on() 方法：

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_ 开头的按钮

于 2013-05-16T18:58:38.923 回答
1

给每个按钮相同的类或使用类型“提交”

<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
});
于 2013-05-16T18:57:14.260 回答
1

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

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

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

$("[name^='ButtonRemove']").on("click", function() {
    // This function will apply on the elements whose name start with "ButtonRemove"
});
于 2013-05-16T18:58:01.880 回答