1

我创建了一个看起来像这样的 html 页面：

<body>
    ...
    <div id="calendar-cont">
        ...
        <div id="overview">
            <div id="overview-type">
                 <h3>Selected Shift Type</h3>
                 <div id="selected-shift-type-cont"></div>
            </div>
            <div id="overview-dates">
                 <h3>Selected Dates</h3>
                 <ul id="selected-dates-cont"></ul>
            </div>
            <a href="#" id="submit-overview">Submit</a>
        </div>
    </div>
</body>

我还有一个用于标签的 jQuery 点击监听器：

$("#submit-overview").click(function() {
   console.log("click");
   submitDates();
});

只要 DOM 保持现在的状态，这个监听器就可以工作。每当我向selected-shift-type-cont或selected-dates-cont监听器添加一个元素时，它就不再工作了。有谁知道为什么会出现这个问题？

我以这种方式添加元素：

var tmp = new Date(date.getTime());
dates[dates.length] = tmp;
$("#selected-dates-cont").append("<li>" + getDateString(tmp, "dd.mm.yyyy") + "</li>");

和

$("#selected-shift-type-cont").html("<div>" + shiftType.name + "</div>");

一旦执行了这两条代码之一，我就无法再单击锚点。

更新：

我使用 jQuery 1.9.1。我还使用 Chrome（版本 28.0.1500.71）进行开发。当我在 Firefox 22 上测试它时，一切都按预期工作。由于我使用 jQuery .load() 方法根据用户在导航栏中单击的内容来更改主要内容。因此，我需要在 localhost 上运行网站，我使用python -m SimpleHTTPServer 8001Mac 上的命令执行此操作。该命令从我调用该命令的目录启动一个网络服务器。这些因素之一是否可能是问题所在

更新 2：

直到现在我才提到我使用了 fullCalendar jQuery 插件。我还创建了一个 jsFiddle 来重现问题http://jsfiddle.net/XagK5/3/。它包含所有重要部分，我还包含了整个 fullCalendar 缩小的 javascript 代码，因为我不知道如何包含外部脚本。

更新 3：

如果我添加以下 CSS，它确实有效：

#submit-overview {
    position: relative;
    z-index: 99;
}
4

1 回答 1

1

http://jsfiddle.net/72wyN/1/

FF 22 对我来说一切正常。

您必须使用较旧（阅读：过时）版本的 jQuery，或者您的代码比您向我们展示的要多，或者您的浏览器已失效。请进一步详述。

$("#submit-overview").click(function() {
   console.log("click");
   alert("still works");
});
window.setInterval(function() {
    $("#selected-dates-cont").append("<li>1/1/2000</li>");
    $("#selected-shift-type-cont").html("<div>blah</div>");
}, 4000);
于 2013-07-15T12:55:54.263 回答