Question

方案

我正在构建一个基于HTML的应用程序，它具有设置的窗口大小。我创建了一个名为＆＃34;更多＆gt;＆gt;＆＃34;的链接单击时有一个onClick事件调用resizeMore（）函数，该函数增加应用程序的宽度，同时运行document.getElementById（IDHERE）.innerHTML来替换＆＃34;更多＆gt;＆gt;＆＃ 34;链接到＆＃34;＆lt;＆lt;少＆＃34;具有onClick事件的链接到resizeLess（）函数，它基本上反向执行相同的操作（将窗口大小调整为原始大小并替换＆＃34;＆lt;＆lt;＆lt;＆＃34;使用＆＃34;更多＆gt;＆gt; ;＆＃34;再次使得该过程可以无限期地重复以缩小或扩展窗口。）

首次点击＆＃34;更多＆gt;＆gt;＆＃34;链接，它正确调整窗口的大小，并正确地将innerHTML更改为现在是＆＃34;＆lt;＆lt;少＆＃34;链接到不同的onClick事件。但是，单击＆＃34;＆lt;＆lt;少＆＃34;链接什么都不做，好像它根本不能识别onClick事件。

但是，我知道JS功能可行，因为如果我创建2个单独的链接，每个链接都有2个调整大小函数的onClick事件，两者都可以正常工作。它似乎只是当我从更多＆gt;＆gt;更改时到＆lt;＆lt;使用innerHTML更少，onClick不再起作用了。

HTML代码

<p id="moreorless">
  <a href="#" class="needMore" onClick="javascript:resizeMore();"> More >> </a>
</p>

JavaScript代码

function resizeMore() {
document.getElementById('moreorless').innerHTML = "<a href='#' class='needMore' onClick='javascript:resizeLess();'> << Less </a>";
}

function resizeLess() {
document.getElementById('moreorless').innerHTML = "<a href='#' class='needMore' onClick='javascript:resizeMore();'> More >> </a>";
}

FIDDLE

我创建了一个JSFiddle试图给出一个我的问题的例子，但由于某些原因，即使相同的代码在我的源代码中部分适用于我，当我点击我的＆＃39;时，JSFiddle也没有做任何事情。更多＆gt;＆gt;＆＃39;链接。无论如何，我在这里提供了一个JSFiddle，其中包含我尝试使用的所有代码。（我不知道为什么它在小提琴中没有做任何事情，但部分在我的网站上有效） - http://jsfiddle.net/NMV5w/

使用Javascript innerHTML用不同的onClick链接替换onClick链接会导致onClick无法正常工作

0 个答案: