Question

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

这是我的HTML和一些Laravel

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

这是我的jquery

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

Answer 1

请改为检查此方法：

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

Answer 2

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

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

这里有一个例子

＆＃13;

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'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

希望这会对你有所帮助。

Answer 3

快速回答：您拥有的行为与您编写的代码一致：在class＆＃34; interview-yes＆＃34;的每个输入上安装一个事件处理程序，并在每个输入上调用它。

使用.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填充容器，事件处理程序仍然有效。

jQuery单击一个按钮最后单击具有相同类的所有按钮

3 个答案: