6

私はこのようなコードを持っています:

$('#foo').on('click', function(e) {
   //do something
});

$('form input').on('change', function(e) {
  //do some other things
));

最初と 2 番目のイベントは、実際には同じ入力フィールドで同じことを行いますが、方法が異なります。問題は、#foo 要素をクリックすると、フォーム変更要素も起動することです。#foo 要素がクリックされたときではなく、入力の内容が変更されたときに常に起動するようにフォームの変更が必要です。

それが問題です ））。これを行う方法？

UPD: jsfiddle のコードは次のとおりです: http://jsfiddle.net/QhXyj/1/

4

4 に答える 4

5

何が起こるかというと、フォーカスが #input を離れたときに onChange が発生します。あなたの場合、これはボタンをクリックすることと一致します。Tab を押してから、ボタンをクリックしてみてください。

この特定のケースを処理するための 1 つの解決策はchange、ボタンがその間にクリックされたかどうかを確認するために、イベントの呼び出しを遅らせることです。実際には 100 ミリ秒で動作しました。コードは次のとおりです。

$().ready(function() {

    var stopTheChangeBecauseTheButtonWasClicked = false;
    $('#button').on('click', function(e) {
        stopTheChangeBecauseTheButtonWasClicked = true;
        $('#wtf').html("I don't need to change #input in this case");
    });

    $('#input').on('change', function(e) {
        var self = this;
        setTimeout(function doTheChange() {
            if (!stopTheChangeBecauseTheButtonWasClicked) {
                $(self).val($(self).val() + ' - changed!');
            } else {
                stopTheChangeBecauseTheButtonWasClicked = false;
            }
        }, 100);
    });
});

そしてフィドル - http://jsfiddle.net/dandv/QhXyj/11/

于 2012-11-11T10:21:40.953 に答える
1

クリックされた要素がフォーカスされる前に、ぼやけた要素の変更イベントが発生するのは当然のことです。タイムアウトを使用したくない場合 (ダンが提案したように、「ボタンがクリックされない限り、入力が変更されてから X ミリ秒後に何かを行う」) - タイムアウトは醜い - それらのアクションを 2 回しか実行できません。入力が変更されたら、その状態を保存して何かをします。その後、後でボタンがクリックされた場合は、保存された状態を取得して、同様のことを行います。すべてのユーザーがそれほど高速であるとは限りません。1 つが入力を終了し (たとえば、 を押してTab)、後でボタンを「独立して」アクティブにした場合、本当に両方のアクションを実行しますか?

var inputval = null, changedval = null;

$('form input').on('change', function(e) {
    inputval = this.value;
    // do some things with it and save them to
    changedval = …
    // you might use the value property of the input itself
));

$('#foo').on('click', function(e) {
    // do something with inputval
});

$('form …').on('any other action') {
    // you might want to invalidate the cache:
    inputval = changedval;
    // so that from now on a click operates with the new value
});
于 2012-11-11T13:32:00.470 に答える
0 
$(function() {


          $('#button').on('click', function() {
              //use text() not html() here
              $('#wtf').text("I don't need to change #input in this case");
          }); 

          //fire on blur, that is when user types and presses tab
          $('#input').on('blur', function() {
              alert("clicked"); //this doesn't fire when you click button
              $(this).val($(this).val()+' - changed!');
          });  
      });​

これがフィドルです

于 2012-11-11T11:19:20.173 に答える
0 
$('form input').on('change', function(e) {
  // don't do the thing if the input is #foo
  if ( $(this).attrib('id') == 'foo' ) return;

  //do some other things
));

アップデート

これはどう：

$().ready(function() {

    $('#button').on('click', function(e) {
        $('#wtf').html("I don't need to change #input in this case");
    });

    $('#input').on('change', function(e) {
        // determine id #input is in focus
        if ( ! $(this).is(":focus") ) return;

        $(this).val($(this).val()+' - changed!');
    });  
});
于 2012-11-11T10:49:54.217 に答える