How to get click event object data from dynamically created button using jQuery or JavaScript

Question

I am collecting page button click events. Normally I am collecting the objects from statically created DOM elements. By using:

 $('input[type=button]').each(function () {
              $(this).bind('click', function () {
                  Console.log(this);
              });
          });

But when I add a new button dynamically like:

 vvar newBtn = document.createElement('input');
      newBtn.type = 'button';
      newBtn.setAttribute('id', 'JgenerateBtn');
      newBtn.setAttribute('value', 'JgenerateBtn');
      newBtn.onclick = function () { alert('javascript dynamically created button'); };
      var holderDiv = document.getElementById('holder');
      holderDiv.appendChild(newBtn);

after this code, New Button is created and event also triggering, but I'm not able to get the Event object by using, same above code.

 $('input[type=button]').each(function () {
          $(this).bind('click', function () {
              Console.log(this);
          });
      });

Please provide suggestion to get the dynamically created elements event object.

nix · Accepted Answer · 2013-06-10 07:15:36Z

6

You may use on() for binding events on dynamically added elements. Like this:

$(document).on('click', 'input[type=button]', function(){
    console.log(this);
});

This is just for simple example, it is better to bind it on element closer to your button that is already on page when it first loads rather than on document.

answered Jun 10, 2013 at 7:15

nix

3,3022 gold badges24 silver badges37 bronze badges

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

5 Comments

elclanrs Over a year ago

Yes, plus bind is deprecated AFAIK.

Chandramohan Over a year ago

Why its not dynamically created elements objects is not logged in my code..can u explain difference between this?

nix Over a year ago

@chandramohan Because events can only be bound to an element that are existing on page when it loads, so dynamically added elements are not selected on your code. Read Direct and Delegated events on the on() link above to better understand.

nix Over a year ago

No prob. Hope you get something from my poor explanation. :)

Avision Over a year ago

Very nice! Worked for me

palaѕн · Accepted Answer · 2013-06-10 07:22:08Z

1

You should use the following:

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#holder').on('click', ':button', function(event) {
    alert('testlink'); 
});

This will attach your event to any button within the #holder element, reducing the scope of having to check the whole document element tree and increasing efficiency.

More info here:-

answered Jun 10, 2013 at 7:22

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Gung Foo · Accepted Answer · 2013-06-10 07:17:18Z

0

The event object is handed to your click handler as the first argument.

$('input[type=button]').each(function () {
    $(this).bind('click', function (event) {
        Console.log(event);
    });
});

answered Jun 10, 2013 at 7:17

Gung Foo

13.6k5 gold badges35 silver badges39 bronze badges

Collectives™ on Stack Overflow

How to get click event object data from dynamically created button using jQuery or JavaScript

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related