在文本框值更改上触发事件。

I want execute the alert inside the $("#address").change function , but that needs to be done only if the the value is changed using the button .

我希望在$(“#address”)中执行警报。更改函数，但只有在使用按钮更改值时才需要这样做。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $('button').click(function(){
    $("#address").val("hi")
   })
   $("#address").change(function(){
    alert("The text has been changed.");
   });

});
</script>
</head>
<body>
<input type="text" id="address">
<button>Click</button>
</body>
</html>

3 个解决方案

#1

You can trigger change event in click function:

您可以在click函数中触发更改事件:

$('button').click(function(){
  $("#address").val("hi")
  $("#address").change(); //or $("#address").trigger("change");
});
$("#address").change(function(){
  alert("The text has been changed.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="address" type="text">
<button>Change</button>

#2

Trigger the change event like this:

触发如下更改事件:

$('button').click(function(){
    $("#address").val("hi")
    $("#address").trigger('change');
  });
  $("#address").change(function(){
    alert("The text has been changed.");
  });

#3

If you want the alert on #address change only when the button is clicked and not when changing the #address value manually:

如果您希望#address上的警报只在单击按钮时更改，而不是在手动更改#address值时更改:

var textChangedHandler = function() {
    alert("The text has been changed.");
};

$('button').click(function(){
    // Attach event handler for 'change' to #address
    $("#address").bind("change", textChangedHandler);

    // Update #address value
    $("#address").val("hi");

    // Trigger 'change'
    $("#address").trigger('change');

    // Remove event handler for 'change' from #address
    $("#address").unbind("change", textChangedHandler);
});

DEMO

演示

#1