0

次の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 呼び出しは起動しません。

4

3 に答える 3

3

type=text 入力フィールドの場合、変更イベントはすぐにはトリガーされません。フィールドがフォーカスを失ったときにトリガーされます。ユーザーが入力フィールドの外でタブアウトしたりクリックしたりしない場合、変更は発生しません。

これは、変更イベントをすぐにトリガーするチェックボックスとラジオ ボタンとは異なります。

イベントリスナーをバインドする前に、入力が DOM にも存在する必要があります。動的に注入された場合は、使用できます

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

また、DOM が読み込まれた後にコードが呼び出されるようにするには、コードをラップします。

$(document).ready(function() {

});
于 2012-09-18T15:34:05.603 に答える
0

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>
于 2012-09-18T15:46:16.347 に答える
0

タイムアウトでキーアップを試してください:

$('.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() { ... })。

于 2012-09-18T15:48:30.993 に答える