Question

小问题。我有一些JavaScript，当我点击一个功能块时，它会改变一些div的内容。从我下面的代码可以看出，在#pubcontent中添加了一些链接。

$("#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>');
});

这很有效。但是现在，我在同一个JavaScript文件中有一些其他代码，当我点击属于#pubcontent的链接时应该执行这些代码。但是当我点击链接时没有任何反应。这段代码是：

$("#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');

总结一下。我按下x和y显示。如果我按下y中的链接，我想看z。但我找不到让'z'部分出现的方法。我不确定这个解释是否有帮助......但有人提出建议吗？

Answer 1

使用委托进行动态添加元素：

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

当然，ID在上下文页面中必须是唯一的，因此ID为“2013”的元素应该是唯一的。

Answer 2

您应该将第二个代码块放在$（“＃publications”）中。在最后一行之后单击（...）函数。

您无法在页面加载时初始化此内容。 jQuery不会听$（“＃2013”）因为它当时不存在。

试试这个：

$("#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');
    });
});

使用div在javascript里面的iframe网址

2 个答案: