web-dev-qa-db-ja.com

jquery-それぞれの/クリック機能が機能しない

編集：これは機能しますが、理由はわかりません

  $('button').each(function() {
    $(this).bind(
        "click",
        function() {
            alert($(this).val());
        });
  });

なぜこれが機能しないのかわかりません...現在、ボタンの値でアラートを出力しようとしているだけですが、ページで機能していません。 Firebugでコンソールエラーが発生せず、Firebugの動作を妨げるようなエラーが表示されません。

私のHTMLは次のようになります。

<table id="addressbooktable">
<thead>
    <tr>
        <th>Name</th>
        <th>Action</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td>7892870</td>
        <td><button id="button-20" class="custom-action" value="XY89" name="info">Click</button></td>
    </tr>

    <tr>
        <td>9382098</td>
        <td><button id="button-21" class="custom-action" value="XY544" name="info">Click</button></td>
    </tr>

    <tr>
        <td>3493900</td>
        <td><button id="button-22" class="custom-action" value="XY231" name="info">Click</button></td>
    </tr>
</tbody>
</table>

そして、コードは次のようになります。

  $('button').each(function() {
    $(this).click(function() {
      alert($(this).val());
    }
  });

しかし、それをクリックしても何も起こりませんか？間違って使用していますか？

jqueryclickeach
12
newbie-shame

このようなクリックイベントですべてのボタンをバインドできます。ボタンをループする必要はありません。

$(function(){
    $("button").click(function() {
        alert($(this).attr("value"));
    });
});

しかし、より正確なセレクターは次のとおりです。

$(function(){
    $("button[id^='button-'").click(function() {
        alert($(this).attr("value"));
    });
});
20
hunter

_);_がないため、次のようにコードが_document.ready_ハンドラーにあることを確認してください：

_$(function() {
  $('button').each(function() {
    $(this).click(function() {
      alert($(this).val());
    }); //missing ); here!
  });
});
_

このように、それらの_<button>_要素がDOMに存在して$('button')がそれらを見つけるまで実行されません。また、次のように、要素のセットに対して .click() を実行できます。

_$(function() {
  $('button').click(function() {
      alert($(this).val());
  });
});
_
7
Nick Craver

不足しています)：

$('button').each(function(){
            $(this).click(function(){
                alert($(this).val());
            });
        });
1
Ashraf Abusada

うん。これを試して：

_$('button').click(function() {
      alert($(this).val());
  });
_

また、そこに_return false_または.preventDefault()が必要な場合もあります。

0
Stuart Burrows

ボタンには.val()メソッドを使用できません。 .attr() を使用して値属性を取得できます。カスタム属性を使用している場合は、 data-attribute を使用します。

試す

$("button").click(function(){
    alert($(this).attr("value"));
});
0
rahul