Javascript Dynamic Event Handling, Not Jquery

Question

here is my code

<html>
    <head>
    <script type="text/javascript">
    window.onload = function(){
        sel = document.getElementsByTagName('select');
        for(i=0;i<sel.length;i++)sel[i].onclick = function(){alert('');}
    }
    </script>
    </head>
    <body>
    <div id="ss"></div>
    <select></select>
    <input type="button" onclick="document.getElementById('ss').appendChild(document.createElement('select'))"/>

    </body>
</html>

"onclick" event working for static tag "Select" but not working for Dynamically created "Select". In other word i want to know what is alternate to .live of JQuery in Javascript.

score 6 · Accepted Answer · edited Mar 25 '15 at 23:36

Bind the event to a parent element, that already exists in the DOM:

document.body.addEventListener('click', function (e) {
  if (e.target.tagName.toLowerCase() == 'select') {
    alert('You clicked a select!');
  }
});

JS Fiddle demo.

It would be slightly more sensible to bind the click to an element 'closer' to the form, and if you use getElementById() rather than getElementByTagName() it's more simple, since you don't have to worry about the index of the number you're binding to.

Tom · Answer 2 · 2012-03-10T21:54:38.783

there's no need to bind the onclick handler to every select every time you add one.

I am not going to retype your whole page, but you'll see what's going on by reading following snippets:

function handler() {
    alert('You clicked a select!');
}

window.onload = function(){
    sel = document.getElementsByTagName('select');
    for(int i= 0; i < sel.length; i++) {
        sel[i].onclick = handler;
    }
}

function addSelect() {
    var slt = document.createElement("select");
    document.getElementById('ss').appendChild(slt);
    slt.onclick = handler;
}

<input type="button" onclick="addSelect();"/>

score 3 · Answer 3 · edited May 23 '17 at 11:53

jQuery's live function works by using "Event Delegation". The basic idea is that you bind a listener on a parent element, which is guaranteed to exist when the page loads. Any element below that (with the exception of some) will fire off an event which can be caught by the parent listener. From there you would need to retrieve the target/sourceElement of the event and determine whether or not it's one you care about.

Something like this will work for listening to clicks. Just make sure that any new elements you are adding are located within the proper parent container and have an attribute which distinguishes them from the rest of the clickable elements.

<html>
<head>
    <script type="text/javascript">
        window.onload = function(){
            // get the relevant container
            var eventContainer = document.getElementById("EventContainer");

            // bind a click listener to that container
            eventContainer.onclick = function(e){

                // get the event
                e = e || window.event;

                // get the target
                var target = e.target || e.srcElement;

                // should we listen to the click on this element?
                if(target.getAttribute("rel") == 'click-listen')
                {
                    alert("You clicked something you are listening to!");
                }// if
            };
        };
    </script>
</head>
<body>
<div id="EventContainer">
    <input type="button" rel="click-listen" name="myButton" value="Listening to this button." />
    <input type="button" name="anotherButton" value="Not listening." />
    <p>I'm also listening to this a element: <a href="#" rel="click-listen">listening to this</a></p>
</div>
</body>
</html>

can you please explain this line e = e || window.event what is || mean here — user794624, Mar 10 '12 at 20:29
This is called *short circuit evaluation*. http://en.wikipedia.org/wiki/Short-circuit_evaluation `||` is a "logical OR". It returns the first true value or the last value. https://developer.mozilla.org/en/JavaScript/Reference/Operators/Logical_Operators — jeremysawesome, Mar 10 '12 at 20:36

score 1 · Answer 4 · answered Mar 10 '12 at 19:59

You're only setting the onclick when the window loads. All you need to do is put the code currently in the window.onload into a named function, then call it every time you add a new select.

here's the dumb way to do it:

<html>
    <head>
    <script type="text/javascript">

    function update () {
        sel = document.getElementsByTagName('select');
        for(i=0;i<sel.length;i++)sel[i].onclick = function(){alert('');}
    }
    window.onload = update;

    </script>
    </head>
    <body>
    <div id="ss"></div>
    <select></select>
    <input type="button" onclick="document.getElementById('ss').appendChild(document.createElement('select'));update();"/>

    </body>
</html>

Diode · Answer 5 · 2012-03-10T20:35:33.230

0

You can use a cross-browser solution as shown below to add event handler dynamically

sel = document.getElementsByTagName('select');
for( i=0; i<sel.length; i++){
    if (sel[i].addEventListener){
        sel[i].addEventListener("click", clickHandler, false);
    } else if (sel[i].attachEvent){
        sel[i].attachEvent("onclick", clickHandler);
    }else{
        sel[i].onclick = clickHandler;
    }
}

function clickHandler(event){

}

edited Mar 10 '12 at 20:35

answered Mar 10 '12 at 20:12

Diode

24,570
8
40
51

replace sel with sel[i] and even after that, its not working for dynamic created element but help me to learn new about cross browser script :-) Thanks – user794624 Mar 10 '12 at 20:27

Javascript Dynamic Event Handling, Not Jquery

5 Answers5