Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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 cant 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.

share|improve this question

3 Answers

up vote 3 down vote accepted

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.

share|improve this answer
2  
Yes, plus bind is deprecated AFAIK. –  elclanrs Jun 10 at 7:16
 
Its worked for me.. –  chandramohan Jun 12 at 3:03
 
Why its not dynamically created elements objects is not logged in my code..can u explain difference between this? –  chandramohan Jun 12 at 3:05
 
@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 R. Eyes Jun 12 at 6:28
 
Thanks for your explanation.. –  chandramohan Jun 13 at 3:05
show 1 more comments
up vote 1 down vote

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:-

share|improve this answer
up vote 0 down vote

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);
    });
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.