JQuery删除了点击事件

时间:2011-11-01 15:15:04

标签: javascript jquery-ui jquery jquery-plugins

我目前正在经历间歇性不点火的点击事件。其他人有过这个问题吗?

代码很简单:

<ul class="iconButtons ui-widget ui-helper-clearfix">
  <li class="ui-state-default ui-corner-all" title="Save">
    <span class="btnSave ui-icon ui-icon-disk"></span>
  </li>
</ul>

$(document).ready(function() {
    $(".btnSave").click(function() {
       alert("Sometimes I never get called!");
    });
});

在所有浏览器中经常出现。使用live演示了相同的行为。

6 个答案:

答案 0 :(得分:2)

我冒昧地说,还有其他一些并发症可以防止你在做什么。

以下是一些可能性:

  1. 除非你给出空的display:block;,否则在某些浏览器上它的宽度和高度为0px并且不可点击。请注意,只是在跨度中添加宽度和高度实际上不会对inline元素起作用。

  2. 您是ajax的内容,而不是重新绑定点击处理程序。您可以随时通过在firebug或chrome控制台中执行$(".btnSave").data("events")来查看该元素的事件数量。

  3. 另一个事件是篡夺你的事件,使用#2中的技术可能有助于揭示这一点。

  4. 您的点击句柄调用,但没有返回正确的结果导致相信它没有被调用。您是否尝试在点击处理程序的最顶部添加alert('called')

  5. 在将click元素附加到DOM之前,您确定元素是否存在于DOM中?您可以在绑定点击处理程序之前在JUST行执行alert($(".btnSave").length)检查。

答案 1 :(得分:2)

我建议你使用一个锚而不是一个跨度为你的按钮它肯定会开火。 把

$(".btnSave").click(function(event){
  event.preventDefault();
  alert("Clicked");
}); 

在IE中,您还必须在锚点内部使用内容才能使其工作:背景图像/背景颜色/文本(也许还有大的负文本缩进)

答案 2 :(得分:1)

您的代码会将事件处理程序连接到调用代码时已存在的类的所有元素。如果你以后添加更多,他们将无法获得处理程序,因为,你没有要求他们这样做。 :-)选项:

  • 如果您动态添加和删除这些元素,则可以使用livelive(以及相关的delegate)使用事件委派来监视事件,而不是将处理程序实际附加到相关元素。 live使用document本身。由于click气泡,document看到所有点击(未被取消),因此jQuery的文档范围处理程序可以查看点击是否在.btnSave元素上并触发处理程序如此。
  • 您可以将脚本放在页面底部(就在关闭</body>元素之前),以便在挂接处理程序时所有元素都存在。
  • 你可以使用jQuery的ready函数来确保在你连接处理程序之前DOM已经准备就绪。

或者,引用你的span非常难以点击(完全是空的)除非有一些CSS给它尺寸你没有显示...; - )


更新:您已经说过跨度有维度,并且处理程序正在连接正常(您没有说如何您知道)。剩下的唯一事情就是如果某些东西在这些元素上挂起click事件并取消它们(例如,通过stopImmediatePropagationlike this),并且它们发生在事件的早期处理程序列表比您的处理程序。但是,似乎更有可能是将问题挂钩了。

答案 3 :(得分:0)

可能有许多不同的原因,例如:

  • 您所指的JS代码未正确执行(未在正确的时刻绑定事件),尝试在DOM准备就绪时执行:

    jQuery(function(){
        // your code goes here
    });
    
  • 您可能动态创建此元素(如果先绑定它,然后创建元素,那么此元素将不具有特定事件)。解决方案是使用.delegate().live() jQuery函数。

  • 代码中的事件可能在某处<未绑定。尝试在JS代码(甚至HTML)中搜索.unbind() jQuery's function的用法。

答案 4 :(得分:0)

事实证明,添加点击事件的范围仅占据了按钮图形的中心部分。直接点击字形总是触发事件,但稍微点击外面(虽然看似仍然在按钮内)不会引发事件。

我希望这可以帮助其他人使用迷你JQuery按钮,就像它们在JQuery UI ThemeRoller page上呈现一样。

答案 5 :(得分:0)

我正在运行jquery-ui-1.10.3并且我遇到了与.toggle按钮相同的间歇性问题 - 他们只是反应不灵活。我认为它在jquery-ui中是固有的,因为即使在他们的演示页面上,切换按钮在触觉响应方面也感觉不那么棒。如果我非常缓慢地点击,我可以通常让按钮打开和关闭,但快速点击是非常命中或错过。我已经尝试了所有提示来加速jquery-ui,但没有一个有效。