3

I search for the whole stackoverflow but I didn't get any good result against this issues.Correct me if i'm wrong.

I want to addEventListener to object that exists or haven't exists in DOM.

In Jquery we can simply do the code below:

$('document').on('click', '.my-button', function () {
    alert("work!!!");
});

But how can I use only Javascript to acheive it? Below is my source code. But after the page loaded, all the new added object doesn't attach a click event.

var Button = document.getElementsByClassName("my-button");
for(i=0;i<Button.length;i++){
    document.getElementsByClassName("my-button")[i].addEventListener("click",function(){
        alert("Work!!!!");
    });
}

Apperciate any suggestion.

user3651999
  • 103
  • 1
  • 3
  • 7

2 Answers2

4

jQuery does not add the event listener to each div, it attaches it to the parent.

What you can do is attach the event to the parent, and in the event handler, see it the target is one of the buttons, then run your function

HTML

<div id="parent">
     <div class="my-button">one</div>
     <div class="my-button">two</div>
     <div class="my-button">three</div>
</div>

JS

document.getElementById("parent").addEventListener("click", function(event) {
     if ( event.target.className === 'my-button') {
          //Do your magic
     }
});

This way, every button you add will run your function. I don't know if the event target has the className attribute, but I suppose is rather simple to get the element based on the event.target object. Remember that older IE won't have the addEventListener function. Check here EventTarget.addEventListener - Web API Interfaces | MDN

Nickydonna
  • 802
  • 1
  • 5
  • 18
  • If my event is `focus`, it seem don't work. How should I do? – ColorWin Nov 29 '16 at 06:41
  • I'm not sure but it may be an issue with event delegation with the `focus` event (https://developer.mozilla.org/en-US/docs/Web/Events/focus#Event_delegation), try using the `useCapture` parameter (add a third parameter to `addEventListener` to `true` `addEventListener("click", function () { // ... }, true)` Haven't tried it myself – Nickydonna Nov 29 '16 at 15:48
1

Well, first off you don't need the second document.getElementsByClssName, secondly IE has a special function.

var buttons = document.getElementsByClassName("my-button");
for(i=0;i<buttons.length;i++){


    // For modern browsers
    if( buttons[i].addEventListener ) {
        buttons[i].addEventListener("click",function(){
            alert("Work!!!!");
        }, false );
    }

    // For outdated IE
    else if( buttons[i].attachEvent ) {
        buttons[i].attachEvent("onclick",function(){
            alert("Work!!!!");
        });
    }
}

EDIT:

You could also use buttons array as something you create on the fly, ie :

var button1 = document.createElement( 'button' );
var button2 = document.createElement( 'button' );
var buttons = [ button1, button2 ]

// Rest of code above
Blake A. Nichols
  • 870
  • 1
  • 6
  • 11