JQuery 删除点击事件
我目前遇到点击事件间歇性不触发。还有其他人遇到过这个问题吗？
代码很简单：
<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 演示了相同的行为。
I'm currently experiencing click events intermittently not firing. Anyone else ever had this problem?
Code is simple:
<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!");
});
});
Occurs frequently in all browsers. Using live demonstrates the same behaviour.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我敢说，还有一些其他的并发症正在阻止你正在做的事情。
以下是一些可能性：
除非您指定空范围
display:block;，否则在某些浏览器上它将具有 0px 的宽度和高度并且不可点击。请记住，仅向跨度添加宽度和高度实际上不适用于内联元素。您正在对内容进行ajax处理，而不是重新绑定点击处理程序。 可以随时在 Firebug 或 Chrome 控制台中执行
$(".btnSave").data("events")来查看该元素的事件数。另一个事件正在篡夺您的事件，使用#2 中的技术可能有助于揭示这一点。
您的点击句柄正在被调用，但没有返回正确的结果，导致人们相信它没有被调用。您是否尝试过在点击处理程序的最顶部添加
alert('used')？在将 click 元素附加到该元素之前，您确定该元素存在于 DOM 中吗？您可以通过在绑定点击处理程序之前在该行执行
alert($(".btnSave").length)进行检查。I would venture to say that there is some other complication going on to prevent what you are doing.
Here are some possibilities:
Unless you give that empty span
display:block;then on some browsers it will have a width and height of 0px and be unclickable. Keep in mind just adding width and height to a span won't actually work oninlineelements.You are ajax'ing content in, and not rebinding the click handler. You can check at any time by doing
$(".btnSave").data("events")in your firebug or chrome console to see the number of events to that element.Another event is usurping your event, using the technique in #2 may help reveal this.
Your click handle is being called, but not returning the right result causing to believe it wasn't being called. Have you tried adding an
alert('called')to the very top of the click handler?Are you certain the element exists in the DOM prior to appending the click element to it? You can check by doing an
alert($(".btnSave").length)at the line JUST before you bind the click handler.我建议您使用锚点而不是跨度作为按钮，它肯定会触发。
在
IE 中，您还必须在锚点内包含内容才能正常工作：背景图像/背景颜色/文本（也许还有大的负文本缩进）
I would suggest you use an anchor instead of a span for your button it will fire for sure.
Put
In IE, you also have to have content inside an anchor for it to work: background image / background color/ text (maybe also with big negative text-indent)
您的代码会将事件处理程序连接到调用该代码时已存在的具有该类的所有元素。如果您稍后添加更多内容，他们将无法获得处理程序，因为您没有要求他们这样做。 :-) 选项：
live代替，如果您添加和动态删除这些元素。live（以及相关的delegate）使用事件委托用于监视事件，而不是实际将处理程序附加到相关元素。live使用document本身。由于click冒泡，document会看到所有点击（未取消的），因此 jQuery 的文档范围处理程序可以查看点击是否在.btnSave 上元素并触发您的处理程序（如果是）。元素之前），以便在连接处理程序时所有元素都在那里。ready函数来确保 DOM 在挂钩之前准备就绪提高你的处理程序。或者，正如所引用的，你的
span非常难以点击（完全是空的），除非有一些 CSS 给出了你没有显示的尺寸...;-)更新< /strong>：你说过跨度有尺寸，并且处理程序连接良好（你没有说你如何知道这一点）。剩下的唯一一件事是，是否有东西挂钩这些元素上的
click事件并取消它们（例如，通过stopImmediatePropagation，像这样），它发生了那它们在事件处理程序列表中比您的处理程序更早。不过，连接起来似乎更有可能存在问题。Your code will hook up event handlers to all elements with that class that already exist when the code is called. If you add more later, they won't get the handler because, well, you haven't asked that they do. :-) Options:
liveinstead, if you add and remove these elements dynamically.live(and the relateddelegate) use event delegation to watch for events rather than actually attaching the handlers to the elements in question.liveuses thedocumentitself. Sinceclickbubbles,documentsees all clicks (that aren't cancelled), and so jQuery's document-wide handler can see if the click was on a.btnSaveelement and fire your handler if so.</body>element), so that all of the elements are there when you hook up your handler.readyfunction to ensure the DOM is ready before you hook up your handlers.Alternately, as quoted your
spanis pretty darned hard to click on (what with being completely empty) unless there's some CSS giving it dimensions you haven't shown... ;-)Update: You've said the span has dimensions, and that the handler is being hooked up fine (you didn't say how you know that). The only thing left is if something is hooking the
clickevent on those elements and cancelling them (e.g., viastopImmediatePropagation, like this), and it happens that they're earlier in the event handler list than your handler is. It seems more likely that there's an issue hooking things up, though.可能有很多不同的原因，例如：
您引用的 JS 代码未正确执行（未在正确的时间绑定事件），请尝试执行它当 DOM 准备好时：
.delegate()或.live()jQuery 函数。事件可能在代码中的某处未绑定。尝试在 JS 代码中搜索
.unbind()jQuery 函数 的用法（甚至 HTML）。There may be many different reasons for that, eg.:
the JS code you are referring to is not executed correctly (does not bind the event in the correct moment in time), try executing it when the DOM is ready:
you may be creating this element dynamically (if you bind it first, then create element, then this element will not have the specific event). The solution is to use
.delegate()or.live()jQuery functions.the event may be unbound somewhere in your code. Try searching for usage of
.unbind()jQuery's function within JS code (or even HTML).事实证明，添加单击事件的范围仅占据按钮图形的中心部分。直接单击字形总是会触发事件，但稍微向外单击（尽管看起来仍在按钮内部）不会引发事件。
我希望这可以帮助其他使用迷你 JQuery 按钮的人，就像它们在 JQuery UI ThemeRoller 页面 上呈现的方式一样。
It turns out the span which the click event was being added to only occupied the central part of the button's graphic. Clicking directly on the glyph always fired the event, but clicking slightly outside (although seemingly still inside the button) would not raise the event.
I hope this helps anyone else using mini JQuery buttons in the same way they are presented on the JQuery UI ThemeRoller page.
我正在运行 jquery-ui-1.10.3，并且 .toggle 按钮也遇到同样的间歇性问题 - 它们只是响应不太灵敏。我认为这是 jquery-ui 固有的，因为即使在他们的演示页面上，切换按钮在触觉响应方面也感觉不太好。如果我非常缓慢且刻意地单击，我通常可以让按钮打开和关闭，但快速单击则非常偶然。我已经尝试了所有加快 jquery-ui 速度的技巧，但没有一个起作用。
I'm running jquery-ui-1.10.3 and I'm having the same intermittent issue with .toggle buttons -- they just aren't very responsive. I think it's inherent in jquery-ui because even on their demo page the toggle button feels less-than-awesome in terms of tactile response. If I click very slowly and deliberately I can usually get the button to toggle on and off but fast clicking is very hit or miss. I've tried all the tips to speed up jquery-ui but none have worked.