url to iframe inside javascript with div

Question

Little question. I've got some JavaScript, and when I click on a feature block it will change the content of some div's. As can be seen from my code underneath, at #pubcontent are some links added to the page.

$("#publications").click(function(){
    $("#content").html('<iframe id="idIframe" src="publication/index.html" style="height:594px;width:98%;"></iframe>');
    $("#titlepage").html('<img src="../images/pageline.png" style="width:2px; height:50px; vertical-align:middle"/>Home&nbsp;&nbsp;>&nbsp;&nbsp;Publications');
    $("#researchcontent").html('');
    $("#pubcontent").html('<ul><li><a id="2013" href="#">2013</a></li><li><a id="2012" href="#">2012</a></li><li><a id="2011" href="#">2011</a></li><li><a id="2010" href="#">2010</a></li><li><a id="2009" href="#">2009</a></li><li><a id="2008" href="#">2008</a></li></ul>');
});

This is working. But now, I've got some other code in the same JavaScript file that should be executed when I click on of the links that are part of #pubcontent. But when I click on the links nothing happens. This code is:

$("#2013").click(function(){
    $("#content").html('<iframe id="idIframe" src="publication/index.html#2013" style="height:594px;width:98%;"></iframe>');
    $("#titlepage").html('<img src="../images/pageline.png" style="width:2px; height:50px; vertical-align:middle"/>Home&nbsp;&nbsp;>&nbsp;&nbsp;Publications&nbsp;&nbsp;>&nbsp;&nbsp;2013');

So to summarize. I press on x and y is shown. If I press on the links in y I want to see z. but I can't find a way to make the 'z'-parts appear. I'm not sure if this explanation helps.. but anybody a suggestion?

A. Wolff · Accepted Answer · 2013-07-03 08:08:02Z

3

Use delegation for dynamic added element:

$("#pubcontent").on('click',"#2013",function(){...});

Of course, IDs must be unique in context page, so element with ID "2013" should be unique.

answered Jul 3, 2013 at 8:08

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

Comments

Ben Van Hees · Accepted Answer · 2013-07-03 08:07:42Z

You should place your second code block inside the $("#publications").click(...) function just after the last line.

you cannot initialize this at the load of the page. jQuery will not listen to $("#2013") because it does not exist at that moment.

Try this:

$("#publications").click(function(){
    $("#content").html('<iframe id="idIframe" src="publication/index.html" style="height:594px;width:98%;"></iframe>');
    $("#titlepage").html('<img src="../images/pageline.png" style="width:2px; height:50px; vertical-align:middle"/>Home&nbsp;&nbsp;>&nbsp;&nbsp;Publications');
    $("#researchcontent").html('');
    $("#pubcontent").html('<ul><li><a id="2013" href="#">2013</a></li><li><a id="2012" href="#">2012</a></li><li><a id="2011" href="#">2011</a></li><li><a id="2010" href="#">2010</a></li><li><a id="2009" href="#">2009</a></li><li><a id="2008" href="#">2008</a></li></ul>');
    $("#2013").click(function(){
        $("#content").html('<iframe id="idIframe" src="publication/index.html#2013" style="height:594px;width:98%;"></iframe>');
        $("#titlepage").html('<img src="../images/pageline.png" style="width:2px; height:50px; vertical-align:middle"/>Home&nbsp;&nbsp;>&nbsp;&nbsp;Publications&nbsp;&nbsp;>&nbsp;&nbsp;2013');
    });
});

Collectives™ on Stack Overflow

url to iframe inside javascript with div

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related