Javascript event triggering creating multiple button .on('click)

Question

I'm using HTML slim for the code below.

.page
  .paper
    button.button.js-copier I copy things

- content_for :js_includes do
  javascript:
    var startingHtml = $('.page').html();

    function initializePlugin() {
      $('.js-copier').each(function () {
        $(this).on('click', function () {
          $('.page').append(startingHtml);
          $(document).trigger('page-refreshed');
        });
      });
    }

    // Run it right away
    initializePlugin();

    $(document).on('page-refreshed', initializePlugin);

Is there a way to fix the fact that when I click on the "I copy things" button, it creates multiple copies of the button as it is iterating over all the button from the button that was selected?

Also, is there a better way to write this code. All I'm trying to do is duplicate the button anytime I click on any buttons(first and any new button created buttons)

-Anthony

Read jQuery's doc on Understanding Event Delegation particularly Event Propagation section. I feel whatever you are trying to do can be simplified once you understand this. — Mikey
– Mikey, Commented Feb 1, 2018 at 16:54
@messerbill Just want to duplicate a button after clicking on it. Right now it is duplicating the button, but it is duplicating multiple times. — Anthony
– Anthony, Commented Feb 1, 2018 at 17:22

rafaelcastrocouto · Accepted Answer · 2018-02-01 17:31:37Z

2

First change this:

  $('.js-copier').each(function () {
    $(this).on('click', function () {
      ...

to this:

  $('.page').on('click', '.js-copier', function () {
    ...

Read this to understand https://learn.jquery.com/events/event-delegation/#event-propagation

Then remove the 'page-refreshed' event because you don't need it:

   $(document).trigger('page-refreshed');
   ...
   $(document).on('page-refreshed', initializePlugin);

Demo solution:

var startingHtml = $('.page').html();

function initializePlugin() {
  $('.page').on('click', '.js-copier', function () {
    $('.page').append(startingHtml);
  });
}

// Run it right away
initializePlugin();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
  <div class="paper">
    <button class="button js-copier"> I copy things</button>
  </div>
</div>

edited Feb 1, 2018 at 17:31

answered Feb 1, 2018 at 17:17

rafaelcastrocouto

12.2k3 gold badges41 silver badges67 bronze badges

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

3 Comments

Anthony Over a year ago

Awesome, does this mean that I don't need the 'page-refreshed' event?

rafaelcastrocouto Over a year ago

I don't know ... if you are just using it to attach the events, then yes. Notice that if your script is before you elements you will need to wait for the load event in order to attach events. It don't seem to be your case though.

Anthony Over a year ago

The trigger method that was removed was triggering this event. So, i guess we don't need it.

Collectives™ on Stack Overflow

Javascript event triggering creating multiple button .on('click)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related