jquery - 每个/单击功能不起作用

EDIT: this works, but not sure why?

编辑:这有效,但不知道为什么?

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

I'm not sure why this isn't working... Right now, I'm just trying to output an alert with the button value, but it's not working on my page. I don't get any console errors in Firebug and can't see anything that would prevent it from working.

我不确定为什么这不起作用...现在,我只是想用按钮值输出一个警报,但它不能在我的页面上工作。我没有在Firebug中收到任何控制台错误,也看不到任何阻止它工作的东西。

My HTML looks like this:

我的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>

And the code looks like this:

代码看起来像这样:

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

But, clicking on it does nothing at all? Am I using it incorrectly?

但是,点击它什么都不做?我使用不正确吗?

5 个解决方案

#1

You can bind all buttons with a click event like this, there is no need to loop through them

您可以使用这样的单击事件绑定所有按钮,无需循环遍历它们

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

But a more precise selector might be:

但更精确的选择器可能是:

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

#2

You're missing a );, and make sure your code is in a document.ready handler, like this:

你错过了a);并确保你的代码在document.ready处理程序中,如下所示:

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

This way it won't run until those <button> elements are in the DOM for $('button') to find them. Also, you can run .click() on a set of elements, like this:

这样它就不会运行,直到那些

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

#3

You are missing ):

你错过了):

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

#4

Yup. Try this:

对。试试这个:

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

You may also want a return false or .preventDefault() in there.

您可能还需要返回false或.preventDefault()。

#5

You cannot use .val() method for button. You can use .attr() to get the value attribute. If you are using custom attributes then use data-attribute.

您不能使用.val()方法作为按钮。您可以使用.attr()来获取value属性。如果您使用自定义属性,则使用data-attribute。

Try

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

#1