Question

当jQuery更改输入值时，我需要弹出一个警告。

目前，当我在文本框中输入时，它只会弹出警告对话框，但在按 CLICK 时则不会。

＆＃13;

$("#c1").on('input', function() {
  alert("value changed");
});

$("#c1").find("button").click(function() {
  $("#c1").find('input').val("hello");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="c1">
  <div class="input-group col-lg-2">
    <span class="input-group-addon">   
      <i class="glyphicon glyphicon-map-marker"></i>   
    </span>
    <input type="text" class="form-control" />
    <span class="input-group-btn">   
      <button class="btn btn-default" type="button">CLICK</button>   
    </span>
  </div>
</section>

＆＃13;

Answer 1

将.trigger('input')添加到按钮点击处理程序：

$("#c1").find("button").click(function(){   
  $("#c1").find('input').val("hello").trigger('input');
});

<强> jsFiddle example

$("#c1").on('input', function() {
  alert("value changed");
});

$("#c1").find("button").click(function(){  
  $("#c1").find('input').val("hello").trigger('input');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="c1">
  <div class="input-group col-lg-2">
    <span class="input-group-addon">   
      <i class="glyphicon glyphicon-map-marker"></i>   
    </span>
    <input type="text" class="form-control" />
    <span class="input-group-btn">   
      <button class="btn btn-default" type="button">CLICK</button>   
    </span>
  </div>
</section>

Answer 2

如果我理解正确，请尝试以下方法：

$("input.form-control").keyup(function(){
    $(this).trigger('change');
});
$("input.form-control").change(function() {
  alert("value changed");
});

或者你可以稍微缩短一下：

$("input.form-control").keyup(function(){
    $(this).trigger('change');
}).change(function() {
    alert("value changed.\r\nNew Value: "+$(this).val());
});

JSFiddle is here

值更改jQuery监听器

2 个答案: