Javascript looping nested click event

Question

I have a nested click event listeners and I have a problem, that when I trigger the event listeners multiple times they get looped and send a request x2 times than it should. Where is the mistake in my code? It's probably a beginner's mistake, so I'm very sorry if that's the case. I'm still learning JavaScript and jQuery.

Code:

    $('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 here: https://jsfiddle.net/o0r4z6g3/

Check out the console output "test".

Cheers!

Aanand Kainth · Accepted Answer · 2020-01-19 19:47:11Z

1

You added event listeners every time your event listener was called. I haven't taken a look at the intention of your code, and you haven't explained it in your answer, but this may fix your problem.

$('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;
});

answered Jan 19, 2020 at 19:47

Aanand Kainth

7194 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

popcorn Over a year ago

You're absolutely right. Can I ask how is it possible that the first click event can pass the variable "id" and "unique" to the second event listener when they are two different functions

Aanand Kainth Over a year ago

@popcorn you could use a global variable (not the ideal solution), but without more information about what this code is doing and what unique and highlight represent, it is very difficult to give you a better answer.

Aanand Kainth Over a year ago

Although, you could just do const id = $('.color-pick-btn').data("highlight"); in the second event listener.

popcorn Over a year ago

That's what I want - to pass the variables from first function to the second, that's why I thought it has to be nested. However, the const id = $('.color-pick-btn').data("highlight"); won't work with multiple buttons. The answer above it enough for me, thanks

Collectives™ on Stack Overflow

Javascript looping nested click event

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related