0

以下の関数のステップ 1 を 2 回実行した場合 (それぞれがステップ 2、3、6 をトリガーします)、ステップ 1 を実行したのと同じ回数繰り返すことなく、ステップ 4を 1 回実行できるようにしたいと考えています(ステップ 4 は、ステップ 5 および 6 をトリガーします)。

ステップ 4 (およびそれに続く関数) が、ステップ 1 (およびそれに続く関数) を実行した回数と同じ回数繰り返されるのはなぜですか?

  $(function(){

    var selected = [], clickHandler;

    var el = document.getElementById("user_search_tags");
    el.addEventListener("click", returnSelected, false);

    // step 1
    $('#people_search_mobile').change(function() {
      console.log(1);
      $('li a', $('#suggestions')).bind('click.autocomplete', clickHandler);
    });

    // step 2
    function clickHandler() {
      console.log(2);
      selected.push($(this).text());
      returnSelected(selected);
      queryMaker(selected);
    }

    // step 3
    function returnSelected(selected) {
      console.log(3);
      tagRemover(selected);
    }

    // step 4
    function tagRemover(selected) {
      $('.search-tag').click(function(){
        console.log(4);
        $(this).hide();
        spliceAndSearch($(this).text(), selected);
      })
    }

    // step 5
    function spliceAndSearch(removed, selected) {    
      console.log(5);
      selected.splice(selected.indexOf(removed), 1);
      queryMaker(selected);
    }

    // step 6
    function queryMaker(selected) {
      $('#uquery').val(selected);
      $.get(this.action, $('#people_search_mobile').serialize(), null, 'script');
      $('#uquery').val('').focus();
      console.log(6);
      return false;
    }

  });

これが私のコンソールログの要約です（ステップを数字で示しています）：

1 2 3 6 1 2 3 6 4 5 6 4 5 6 3

ありがとうございました。

解決

$(関数(){

var selected = [];
var clickHandler;

$('#people_search_mobile').change(function() {
  $('li a', $('#suggestions')).bind('click.autocomplete', clickHandler);
});

$('body').on('click', '.search-tag', tagRemover);

function tagRemover() {
  $(this).hide();
  console.log(selected);
  selected.splice(selected.indexOf($(this).text()), 1);
  queryMaker(selected);
}

function clickHandler() {
  selected.push($(this).text());
  returnSelected(selected);
  queryMaker(selected);
}

function returnSelected(selected) {
  var saySelected = function() { alert(selected); }
  return saySelected;
}

function queryMaker(selected) {
  $('#uquery').val(selected);
  $.get(this.action, $('#people_search_mobile').serialize(), null, 'script');
  $('#uquery').val('').focus();
  return false;
}

});

4

3 に答える 3

0

ステップ 4 は、実際にはロギング、非表示、スプライシングを実行するのではなく、それらを要素のclickイベントにフックします。.search-tag

その観点から、コードをもう一度見て、これらを実行する順番を見つけてください。

于 2013-06-25T15:17:02.487 に答える