Question

SO，

我猜我的问题相当简单。我提供了一个小代码片段来帮助说明问题。

我试图抓住按钮的ID。它工作正常，除非你单击按钮内的任何一个文本，然后jQuery尝试抓住它。

我正在使用event.target.attributes.id.value找到被点击元素的id属性，但如果有人知道更简单的方法请分享一下！

如果您需要帮助来理解问题，只需运行代码片段并尝试单击按钮，然后单击按钮内的文本。无论如何，控制台日志语句都应显示单击按钮的ID。

感谢任何能提供帮助的人。

＆＃13;

$(document).on("click", ".eat", event => {
        event.preventDefault();
        const id = parseInt(event.target.attributes.id.value);
        console.log(id); 
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-success eat" id="10">
<p>What is my ID?</p>
<h4>---> Click to find out! ---></h4>
</button>
<button type="button" class="btn btn-success eat" id="11">
<p>What is my ID?</p>
<h4>---> Click to find out! ---></h4>
</button>

＆＃13;

Answer 1

我会使用更多的jQuery解决你的问题，但事实上更容易。只需拿走每个按钮并为每个按钮添加一个事件。

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

＆＃13;

$('.eat').each(function(){
      $(this).click(function(){
        var id = $(this).attr('id');
        console.log(id);
      })
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="btn btn-success eat" id="10">
<p>What is my ID?</p>
<h4>---> Click to find out! ---></h4>
</button>

<button type="button" class="btn btn-success eat" id="11">
<p>What is my ID?</p>
<h4>---> Click to find out! ---></h4>
</button>

＆＃13;

Answer 2

一个非常简单明了的解决方案是：

$(".eat").click(function(e) {
    e.preventDefault();
    console.log($(this).attr("id"));
})

然后你可以parseInt那个id。

使用jQuery仅抓取click事件上的button元素

2 个答案: