How to target elements set from innerHTML or .html() using jquery

Question

I have a div whose content gets dynamically generated from innerHTML and I cant seem to target those elements using jQuery for validation, Eg This is the page:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
</head>
<body>
<span id="alert1">Alert1</span>
<input type="button" value="Click Me" id="button1" />
<div id="empty"></div>
</body>
</html>

and this is the js code:

<script type = "text/javascript"> 
    $(document).ready(function() {
         $('#button1').click(function() {
             var html = "uname <input type='text' id='uname'><br />password <input type='text' id='password'><br /><span id='alert'>Alert</span>";
             $('#empty').html(html);
         });
         $('#alert').click(function() {
             alert('Alert');
         });
         $('#alert1').click(function() {
             alert('Alert1');
         });
    });
</script>

The alert for the span with id alert1 works but for id alert which is set using innerHTML or .html() does not work so how to fix this?

Thank you in advance

Anders Arpi · Accepted Answer · 2012-07-30 07:29:29Z

3

The problem here is that when you write like this..

    $("#element").click(function() {
        alert("Alert!");
    });

.. it will only create events handlers for elements that exist when you execute the code. It won't create event handlers for future elements even if they have the same jQuery selector ("#element" in this case).

What you need to do is bind with .on(event, selector, function) on a parent element, as the events "bubble up" the hierarchy. That way you can handle future events from the specified selector. Personally I would do it like this:

$(document).ready(function() {
     $('#button1').click(function() {
         var html = "<insert lots of html stuff here>";
         $('#empty').html(html);
    });

    $(document).on("click", "#alert", function() {
        alert("Alert!");
    });

    $(document).on("click", "#alert1", function() {
        alert("Alert1!");
    });
});

edited Jul 30, 2012 at 7:29

answered Jul 30, 2012 at 7:10

Anders Arpi

8,4373 gold badges35 silver badges49 bronze badges

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

Comments

Abdul Wahid · Accepted Answer · 2012-07-30 07:14:33Z

1

you should use delegate

$(elements).delegate(selector, events, data, handler);

as per your code

$(document).ready(function() {
  $("yourdiv").delegate("#alert, #button, #Alert1", "click", function() {
    alert('Alert');
  });
});

answered Jul 30, 2012 at 7:14

Abdul Wahid

1672 silver badges8 bronze badges

Comments

Musa · Accepted Answer · 2012-07-30 07:08:30Z

0

Use event delegation to bind click handler, use .on() for this

     $('#empty').on('click', '#alert1', function() {
         alert('Alert1');
     });

or you could just bind the handler after you create the content.

answered Jul 30, 2012 at 7:08

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Comments

Vishal · Accepted Answer · 2012-07-30 07:16:29Z

0

Use .on() instead of .click() to bind events at run-time. You may try .live() but it is deprecated.

Here's the fiddle : http://jsfiddle.net/Akyrk/

edited Jul 30, 2012 at 7:16

answered Jul 30, 2012 at 7:05

Vishal

1,2341 gold badge9 silver badges16 bronze badges

Comments

VDP · Accepted Answer · 2012-07-30 07:21:56Z

you have to attach the listeners AFTHER you added the objects to the dom!

so afther .html(...)

<script type = "text/javascript"> 
$(document).ready(function() {
     $('#button1').click(function() {
         var html = "uname <input type='text' id='uname'><br />password <input type='text' id='password'><br /><span id='alert'>Alert</span>";
         $('#empty').html(html);
         $('#alert').click(function() {
             alert('Alert');
         });
     });

});

.on() is also an option. You bind listener independent if they are renderd to the dom or not. But I recommend the first approach. If you are writing larger applications the approach of attaching handlers after creation is much clearer then event delegation automatically attaching event handlers maybe without you even noticing. for 1 or 2 it's ok but if you're adding multiple events to multiple objects (tags, classes) you could loose oversight...

Collectives™ on Stack Overflow

How to target elements set from innerHTML or .html() using jquery

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related