Html added by jQuery .html() is not visible to javascript functions

Question

Every couple of seconds on the server I generate a chunk of html, which I display in UI by using jQuery method .html().

    $('#contentContainer').html(JSON.parse(htmlString));

Injected html is correctly displayed.

However, there are also some javascript functions, which manipulate this html code. For example, one is connected to the div element:

$("#startStop").click(function () { ..});

Another to bootstrap tooltip:

    $(function () {
        $("[rel='tooltip']").tooltip();
        $(".errorTip").tooltip();
    });

The problem is that they no longer work when I populate the div element with the html from the server.

I can see that the elements are created with correct ids:

    <div id="startStop" data-toggle="button" class="sbClickable btn active">
    ....
    </div>

The only difference, is that when I open the source code in chrome, the generated html is missing there.

Here are the steps, how I load code to the page:

page.chtml file is loaded
in the page.chtml there is an empty div
```
<div id="contentContainer">
</div>
```
then in page.chtml I call a method to populate the container. The method is located in external .js file
```
<script type="text/javascript">
    einzelaktion.populateHtml();
</script>
```
in populateHtml I make an ajax request to the server. When data is retrieved I empty the div and populate it with the new data:
```
$('#contentContainer div').empty();
$('#contentContainer').html(JSON.parse(htmlString));
```
Methods, with which I have problems located in the same external .js file.

I tried moving method, which populates the container, to page.chtml, but it didn't help.

I also tried to create container elements when page is loaded in a straightforward manner, so they are created together with other elements for page.chtml and they are visible in the page source. In this case, everything works correctly till I make a first call to server and replace the html for the div.

I googled similar problems, but didn't find anything close to my issue..

Do I miss something?

Denys Séguret · Accepted Answer · 2013-03-20 11:18:16Z

2

Change

$("#startStop").click(function () { ..});

to

$("#contentContainer").on('click', '#startStop', function () { ..});

This way, the elements having id startStop and being created after you call the binding function will receive the click event.

answered Mar 20, 2013 at 11:18

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

3 Comments

mayrs Over a year ago

You might want to replace '#startStop' with a class selector like '.sbClickable.btn.active'. elements having id startStop sounds wrong since an id should be unique. But Anelook only mentions one example for an element with a correct id so it should be okay. You could change your fiddle if it gets accepted though.

Denys Séguret Over a year ago

@junior I assume there is no duplication of the #startStop element as the whole #contentContainer content is replaced.

Anelook Over a year ago

Works perfectly! And for the tooltip - I call the function tooltip() every time I update the container. Thanks a lot for the help!

dockeryZ · Accepted Answer · 2013-03-20 11:19:16Z

0

Whenever you add HTML to the DOM after it is loaded already, you must use jQuery's on() function to create a bind...

For instance, $(".newDiv").on('click', function() { alert('clicked dynamic HTML!')});

answered Mar 20, 2013 at 11:19

dockeryZ

4,0011 gold badge22 silver badges30 bronze badges

Collectives™ on Stack Overflow

Html added by jQuery .html() is not visible to javascript functions

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related