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" />

しかし、私のページの 1 つが動的に生成されます。つまり、さまざまな数の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 ステートメントを調整して、これらすべてのボタンを 1 つのメソッドでキャッチすることはできますか?

編集：うわー。みんなありがとう！方法はたくさんあります。JQueryはとても便利です！

4

4 に答える 4

5

ボタンにクラス名を使用して、jquery セレクターがイベントを選択し、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);
        });
});
于 2013-05-16T18:57:37.273 に答える
1

各ボタンに同じクラスを与えるか、タイプ「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
});
于 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 に答える