在用javascript向div中添加元素后，未修改的现有链接停止工作

Question

我有一些像这样的html

<div id='myArea'></div>
<div id='aDifferentUnrelatedArea'></div>
<a href='#' id='closeButton' class='myButton'>Close</a>

按钮有一个像这样的监听器

$('#closeButton').click(function(event){
    event.preventDefault();
    var myNode = document.getElementById("myArea");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }
});

和我添加元素到myArea如下

document.getElementById('myArea').innerHTML = 'a title';
var newElement = document.createElement('a');
newElement.setAttribute('href', "#");
newElement.appendChild(document.createTextNode('a string'));
document.getElementById('myArea').appendChild(newElement);

在添加元素之前，Close按钮看起来很好。没有什么要关闭的，但我的悬停css应用到它，我的光标成为可点击的一个。在我像这样添加元素到myArea之后，按钮的行为更像一张图片，没有与之相关的点击(它不再像<a>标签那样行事，也不做点击事件)。

Answer 1

很抱歉造成混乱，但谢谢你帮我找到问题。实际的问题是我有这个浮动页脚按钮在页面的底部。它似乎占据了整条线的功能(我的意思是，与按钮在同一条线上的任何东西都会表现得像一张图片)。我只是在body的底部添加了额外的空间，所以没有东西会和footer在同一行。