Provide onclick dynamically and avoid duplicate event calling

Question

I try to add an item, just like this sample: https://codepen.io/Gobi_Ilai/pen/LLQdqJ

var addToMenu = function () {
  var newName = $("#addInputName").val();
  var newSlug = $("#addInputSlug").val();
  var newId = 'new-' + newIdCount;

  nestableList.append(
    '<li class="dd-item" ' +
    'data-id="' + newId + '" ' +
    'data-name="' + newName + '" ' +
    'data-slug="' + newSlug + '" ' +
    'data-new="1" ' +
    'data-deleted="0">' +
    '<div class="dd-handle">' + newName + '</div> ' +
    '<span class="button-delete btn btn-danger btn-xs pull-right" ' +
    'data-owner-id="' + newId + '"> ' +
    '<i class="fa fa-times" aria-hidden="true"></i> ' +
    '</span>' +
    '<span class="button-edit btn btn-success btn-xs pull-right" ' +
    'data-owner-id="' + newId + '">' +
    '<i class="fa fa-pencil" aria-hidden="true"></i>' +
    '</span>' +
    '</li>'
  );

  newIdCount++;

  // update JSON
  updateOutput($('#nestable').data('output', $('#json-output')));

  // set events
  $("#nestable .button-delete").on("click", deleteFromMenu);
  $("#nestable .button-edit").on("click", prepareEdit);
};


 var deleteFromMenu = function () {
            var targetId = $(this).data('owner-id');
            var target = $('[data-id="' + targetId + '"]');
            var textConfirm = "Are you sure to delete" + target.data('name') + " ?";

                var result = confirm(textConfirm);
                if (!result) {
                    return;
                }

            // Remove children (if any)
            target.find("li").each(function () {
                deleteFromMenuHelper($(this));
            });

            // Remove parent
            deleteFromMenuHelper(target);

            // update JSON
            updateOutput($('#nestable').data('output', $('#json-output')));

        };

And after that try to delete one of the records. The page asked to confirm the question (1+added record) times. For example, if try to add 2 records, and try to delete one item(not last added item), 3 confirm message appears.

How could I manage $("#nestable .button-delete").on("click", deleteFromMenu); to see only one confirm question. Thanks.

4b0 · Accepted Answer · 2020-02-25 03:21:47Z

1

Use .off(). The .off() method removes event handlers that were attached with .on().

So in your case:

 $("#nestable .button-delete").off().on("click", deleteFromMenu);

edited Feb 25, 2020 at 3:21

answered Feb 25, 2020 at 3:16

4b0

22.4k30 gold badges97 silver badges143 bronze badges

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

1 Comment

Nguyễn Văn Phong Over a year ago

I afraid the solution leading to just the last button affected. How about the second solution to my answer ?

Nguyễn Văn Phong · Accepted Answer · 2020-02-25 13:26:13Z

1

You can use removeEventListener or off() to remove an event listener before.

$("#nestable .button-delete").off().on("click", deleteFromMenu);
$("#nestable .button-edit").off().on("click", deleteFromMenu);

Updated (Give the better solution)

If #nestable is static, you should move the listener event outside the addToMenu method.

Format: $(staticAncestors).on(eventName, dynamicChild, function() {});

So in your case

// set events
  $("#nestable").on("click", '.button-delete', deleteFromMenu);
  $("#nestable").on("click", '.button-edit', prepareEdit);

var addToMenu = function () {
  ....
  // update JSON
  updateOutput($('#nestable').data('output', $('#json-output')));
};

Read the following post to have a better understanding.

Event binding on dynamically created elements?

edited Feb 25, 2020 at 13:26

answered Feb 25, 2020 at 3:23

Nguyễn Văn Phong

14.2k19 gold badges48 silver badges65 bronze badges

2 Comments

Nguyễn Văn Phong Over a year ago

@مهدی نبوی I've just given another solution, please take a look at

مهدی نبوی Over a year ago

Dear @Phong , Shree provide answer sooner, will change accepted answer on case your answer get's more vote, anyway thank you so much.

Collectives™ on Stack Overflow

Provide onclick dynamically and avoid duplicate event calling

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related