Javascript зацикливание вложенного события клика

Question

У меня есть вложенные прослушиватели событий щелчка, и у меня есть проблема, что, когда я запускаю прослушиватели событий несколько раз, они зацикливаются и отправляют запрос в 2 раза, чем следовало бы. Где ошибка в моем коде? Вероятно, это ошибка новичка, поэтому мне очень жаль, если это так. Я все еще учу JavaScript и jQuery.

Код:

    $('body').on('click', '.color-pick-btn', function() {
      id = $(this).data("highlight");
      unique = $(this).data("unique");

      $(".color-picker").show();
      //show the menu directly over the placeholder
      $(".color-picker").position({
        my: "right top",
        at: "right bottom",
        of: this,
        collision: "fit"
      });

      $('body').on('click', '.color-picker-item', function() {
        color = $(this).data("color");
        $.ajax({
            type: "POST",
          url: '/echo/json',
          //data: "highlight=" + id + '&color=' + color + "&unique=" + unique,
          data: {
          json:'{"highlight":"id","color":"color","unique": "unique"}'
          },
          dataType: 'json',
        }).done(function(data) {
          console.log('test');
        });
        $(".color-picker").hide();
        return false;
      });

      $(document).click(function(event) {
        if (!(($(event.target).hasClass('color-pick-btn')) || ($(event.target).hasClass('color-picker-item')))) {
          $(".color-picker").hide();
        }
        return false;
      });
      return false;
    });

JSFiddle здесь: https://jsfiddle.net/o0r4z6g3/

Проверьте вывод консоли "test".

Ура!

Answer 1

Вы добавляли прослушиватели событий каждый раз, когда вызывался ваш прослушиватель событий. Я не рассмотрел назначение вашего кода, и вы не объяснили его в своем ответе, но это может решить вашу проблему.

$('body').on('click', '.color-pick-btn', function() {
  // .position() uses position relative to the offset parent, 
  // so it supports position: relative parent elements
  pos = $(this).offset();
  id = $(this).data("highlight");
  unique = $(this).data("unique");

  // .outerWidth() takes into account border and padding.
  width = $(this).outerWidth();
  $(".color-picker").show();
  //show the menu directly over the placeholder
  $(".color-picker").position({
    my: "right top",
    at: "right bottom",
    of: this,
    collision: "fit"
  });

  return false;
});

$('body').on('click', '.color-picker-item', function() {
  color = $(this).data("color");
  $.ajax({
    type: "POST",
    url: '/echo/json',
    //data: "highlight=" + id + '&color=' + color + "&unique=" + unique,
    data: {
      json: '{"highlight":"id","color":"color","unique": "unique"}'
    },
    dataType: 'json',
  }).done(function(data) {
    console.log('test');
  });
  $(".color-picker").hide();
  return false;
});

$(document).click(function(event) {
  if (!(($(event.target).hasClass('color-pick-btn')) || ($(event.target).hasClass('color-picker-item')))) {
    $(".color-picker").hide();
  }
  return false;
});