Question

我有以下代码：

$(".select").click(function(){
  $("input").val($(this).text()).change();
});
$("input").change(function(){
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button class="select">1</button>
<button class="select">2</button>
<button class="select">3</button>
<button class="select">4</button>

在这里，当我通过点击<button>选择相同的值时，.change()函数无论如何都会被触发，这使得它与其他任何函数没有区别，即破坏其专业化仅在价值变动时被触发。

SO上存在similar question，但它没有对此问题给出任何答案。

如何解决这个问题？

Answer 1

没有传递处理程序的.change()方法会触发change事件。您应该比较值并有条件地触发事件。

以编程方式更改输入值时，不会触发change事件。因此，当您手动触发事件时（使用change方法），您应该在触发事件之前自己检查值。

Answer 2

添加if语句，它将根据您的需要工作

$(".select").click(function(){
if($("input").val() != $(this).text())
  $("input").val($(this).text()).change();
});
$("input").change(function(){
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button class="select">1</button>
<button class="select">2</button>
<button class="select">3</button>
<button class="select">4</button>

检测文本框值的更改，其值在按钮单击时更改

2 个答案: