jquery script doesn't work after using .html()

Question

when I use .html() to put data, the jQuery script doesn't work with the new data. The code is like the this:

<html>
<head>
<script>
$(document).ready(function(){
    $("#newhtml").on("click", function(){
        alert("I'm the NEW one!");
    });
    $("#put_new").on("click", function(){
        $("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>");
    });
});
</script>
</head>
<body>
<div id="newdiv"></div>
<input type="button" id="put_new" value="put new html" />
</body>
</html>

This is a simple example but there is more data I want to put and I want the new elements work with the script in this way. I tried to search on stackoverflow.com but I didn't find any applicable one. Thank you so much.

I've answered a similar question. Might shed some light on what's happening/how to avoid it: http://stackoverflow.com/questions/12468847/prototype-js-stops-working-after-adding-jquery-replace-other-jquery-works-ju/12480885#12480885 — dontGoPlastic, Apr 23 '13 at 14:50

score 3 · Answer 1 · answered Apr 23 '13 at 14:49

Thats because at the time of executing your current .on() statement, the element #newhtml does not exist.

Change your event binding to:

$(document).on('click', '#newhtml', function(){
    alert("I'm the NEW one!");
});

The main element(s) you call on() on must be existing at the time of the call. In the second argument, you can specify selector(s) for element(s) that may not be existing at the time of binding.

PSL · Accepted Answer · 2013-04-23T15:27:04.873

Use this :- http://jsfiddle.net/FQjUZ/

 $("#newdiv").on("click", "#newhtml", function(){
        alert("I'm the NEW one!");
    });
    $("#put_new").on("click", function(){
        $("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>");
    });

Reason is that, for this kind of functionality where elements are added at a later time to the DOM, you need to use delegated event handler, not just binding.

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

score 0 · Answer 3 · answered Apr 23 '13 at 14:51

your event on the newHtml will not work because you attach the event before adding the node to the DOM, so in order for it to work you need to implement your event after the html method is called.

 $(document).ready(function(){
    $("#put_new").on("click", function(){
      $("#newdiv").html("<input type = 'button' id = 'newhtml' value = 'click on me'/>");
      $("#newhtml").on("click", function(){
           alert("I'm the NEW one!");
       });
   });
});

score 0 · Answer 4 · answered Apr 23 '13 at 15:07

0

Try something like this.

var f00 = "doStuff()";

$("#newdiv").html('<input type="button" id="newhtml" value="click on me" onclick="' + f00 + '"/>');

function doStuff() {
    //stuff
}

answered Apr 23 '13 at 15:07

Jonathan

8,771
4
41
78

jquery script doesn't work after using .html()

4 Answers4