jQuery单击一个按钮最终单击具有相同类的所有按钮答案

【问题标题】：jQuery click one button end up clicking all button with same classjQuery单击一个按钮最终单击具有相同类的所有按钮
【发布时间】：2018-02-28 13:48:52
【问题描述】：

我有一个填充我的页面的 foreach 循环。这填充了几个作为按钮的输入标签，所有按钮都具有相同的类。当我单击一个按钮时，所有按钮都被单击。有没有办法让我只点击一个按钮时它只响应那个按钮。如果我有 20 个按钮并单击一个按钮，我会收到 20 个警报（“测试”）。我要改变什么，所以我只收到一个警报（“测试”）。

这是我的一些 Laravel 的 HTML

<input class="interview-yes" id="{{$scan->id}}" type="submit" value="Yes"">

这是我的 jquery

$('.interview-yes').click(function () {
  alert($(this.id));
)};

【问题讨论】：

使用 id ，如果它在您的代码中是唯一的，否则此代码将提醒所有添加了 .interview-yes 类的 ids
你是否直接在页面上的<script>标签内编写了你的jquery函数？
@HimanshuUpadhyay，是的，我有。它位于 $document.ready 内的脚本标签中
这与一个类有关。使用 # 绑定到 id。
@Aaron，试试我的回答。希望它能解决问题。

标签： jquery html laravel-5

【解决方案1】：

改为检查此方法：

$(document).on('click','.interview-yes',function () {
  alert($(this).attr('id'));
)};

【讨论】：

感谢您的回答，但我仍然遇到同样的问题

【解决方案2】：

由于您的按钮是动态的，您需要event delegate。

$(document).on('click', 'input.interview-yes', function () {
  console.log($(this).attr('id'));
)};

举个例子

for(var i=0; i<10; i++){
  $('body').append(`<input class="interview-yes" id="input_${i}" type="submit" value="Yes" />`);
}

$(document).on('click', 'input.interview-yes', function(){
  console.log($(this).attr('id'));
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

希望这会对你有所帮助。

【讨论】：

【解决方案3】：

快速回答：您的行为与您编写的代码一致：在“interview-yes”类的每个输入上安装一个事件处理程序，并在每个输入上调用它。

使用 .on (http://api.jquery.com/on/) 可以更好地实现您想要的行为

简单的例子，给出这个 html：

<div class="button-container">
  <input class="interview-yes" id="id1" type="submit" value="Yes"">
  <input class="interview-yes" id="id2" type="submit" value="Yes"">
  <input class="interview-yes" id="id3" type="submit" value="Yes"">
</div>

你可以使用这个jquery代码：

$('.container').on('click','.interview-yes', function(e){
  alert($(this).attr('id'));
}

作为一个额外的好处，使用此策略，如果您稍后通过 ajax/js 填充容器，事件处理程序仍然有效。

【讨论】：