jquery - Jquery 不会通过 .change 触发

Question

我得到以下 jquery 代码：

$('.sub').change(function(event) {
$.post( 'get_products.php', $("#products_search").serialize(),
  function( data ) {
      console.log(data);
  },
  'json'
);
});

并有像

<input type="text" name="lkj" id="lkj" class="sub" value="" onfocus="if(this.value == 'Search keyword') {this.value=''}" onblur="if(this.value == ''){this.value ='Search keyword'}"  />

表格是这样的：

<form action="#" method="POST" name="products_search" id="products_search">

但是，当我更改 lkj 中的值时，jquery ajax 调用不会触发。

Answer 1

对于 type=text 输入字段，不会立即触发 change 事件。当字段失去焦点时触发。如果用户从不跳出或在输入字段之外单击，则永远不会触发更改。

这与复选框和单选按钮不同，它们会立即触发更改事件

在将任何事件侦听器绑定到它之前，输入也必须存在于 DOM 中。如果它是动态注入的，那么你可以使用

$('body').on('change', '.sub', function() {
  // your code goes here
});

此外，为了确保您的代码在 DOM 加载后被调用

$(document).ready(function() {

});

Answer 2

尝试将此示例与on('change')事件绑定一起使用：

<form action="#" method="POST" name="products_search" id="products_search">
    <input type="text" name="lkj" class="sub" placeholder="Search keyword"  />
</form>​
<script type="text/javascript">
$(function(){
    $('.sub').on('change', function(event){
        $.post( 
            'get_products.php', 
            $("#products_search").serialize(),
            function( data ) {
              console.log(data);
            },
            'json'
        );          
    });​
});
</script>

Answer 3

尝试使用超时的键控：

$('.sub').keyup(function(event) {

    if( $(this).timeout ) clearTimeout( $(this).timeout );

    $(this).timeout = setTimeout(function(){

        alert('posting...');

        $.post( 'get_products.php', $("#products_search").serialize(),
            function( data ) {
                console.log(data);
            }, 'json'
        );

    },250);

});

确保将其包裹在$(function() { ... });