我有一些代码,我循环遍历页面上的所有选择框,并将.hover事件绑定到它们,以便在它们的宽度上做一些麻烦mouse on/off.
这发生在页面准备就绪并且工作得很好.
我遇到的问题是,我在初始循环后通过Ajax或DOM添加的任何选择框都不会受到事件限制.
我找到了这个插件(jQuery Live Query Plugin),但在我用插件添加另外5k到我的页面之前,我想知道是否有人知道这样做的方法,无论是直接使用jQuery还是通过其他选项.
到目前为止,该网站上的大多数人可能都知道:
$("#someTable TD.foo").click(function(){
$(e.target).doSomething();
});
将会比以下情况更糟糕:
$("#someTable").click(function(){
if (!$(e.target).is("TD.foo")) return;
$(e.target).doSomething();
});
现在有多糟糕将取决于你的桌子有多少TD,但只要你有至少几个TD,这个一般原则应该适用.(注意:当然,聪明的事情是使用jQuery委托而不是上面的代码,但我只是试图用明显的区别来做一个例子).
无论如何,我向同事解释了这个原则,他们的回答是"嗯,对于站点范围的组件(例如,日期选择INPUT),为什么停在那里？为什么不将每种类型的组件的一个处理程序绑定到身体本身？" 我没有一个好的答案.
显然使用委托策略意味着重新思考如何阻止事件,这是一个缺点.此外,假设你有一个页面,你有一个"TD.foo",不应该有一个事件连接到它.但是,如果您理解并愿意解决事件冒泡变化,并且如果您执行"如果您将.foo放在TD上,它始终会将事件连接起来"的策略,那么这些似乎都不是很重要.
我觉得我必须遗漏一些东西,所以我的问题是:将所有站点范围的组件的所有事件委托给BODY还有其他任何缺点(而不是直接将它们绑定到所涉及的HTML元素,或委托它们)到非BODY父元素)？
我创建了一个小提琴试图调试我遇到的问题,一旦我用jQuery重新排列html元素,那些元素上的悬停事件就不再起作用了.
但是,我在这里遇到了这个有趣的情况:http://jsfiddle.net/4yv1trj4/
我有一个主要div,一旦我将鼠标悬停在它上面就会改变颜色.
$("#block").hover(function() {
$(this).css("backgroundColor", "red");
}, function() {
$(this).css("backgroundColor", "#888");
});
如果单击该按钮,主要divID将更改为block2:
$("#block").attr("id","block2");
但是$("#block").hover()当我盘旋时仍然会发射#block2.此外,所有悬停呼叫#block2都不起作用.是否有一个基本的原理,jQuery如何工作,这可以解释这个？
问题:我需要的任何数量的事件处理程序(,DOM节点绑定到任意数量的元素window,document),在动态运行时,我需要能够更新事件我的网页的生命周期中动态创建(或损坏)节点结合.我可以看到有三个选项来解决这个问题:
I)事件委托window
II)每个节点上的直接事件绑定
III)共同祖先的事件委托(直到运行时才会知道,并且可能需要在更改DOM时重新计算)
这样做最有效的方法是什么？
我正在开发一组需要对用户事件进行分析跟踪(点击,滚动等)的页面,我希望能够在一堆页面上轻松配置这些事件处理程序,而无需编写脚本来处理事件每个实例的绑定.此外,因为我可能需要在将来跟踪新事件,或者跟踪动态添加到页面/从页面中删除的元素上的事件,我需要能够考虑在生命周期中发生的DOM中的更改的页面.
作为我正在考虑的例子,我想创建一个接受配置对象的函数,该对象允许程序员为每个事件指定默认处理程序,并允许它们为特定元素覆盖它们:
Analytics.init({
// default handlers for each event type
defaultHandlers: {
"click": function(e) { ... },
"focus": function(e) { ... }
},
// elements to listen to
targetElements: {
// it should work with non-DOM nodes like 'window' and 'document'
window: {
// events for which the default handlers should be called
useDefaultHandlers: ['click'],
// custom handler
"scroll": function(e) { ... }
},
// it should work …javascript jquery google-analytics javascript-events event-delegation
我知道"实时"功能现已弃用.如何迁移以下内容以使用新的"on"？
$('a.action').live( "click", function (evt) {
// Do stuff
}
场景是a.action正在动态创建.我试过这个,但无济于事:
$('a.action').on( "click", function (evt) {
// Do stuff
}
我有两个jquery函数一起工作,一个依赖于一个类,另一个取消了类.
一旦它被删除,我希望功能停止工作,但它继续吗？
这是怎么回事？
这是小提琴,为自己试试.
<div class="container disabled">
<a href="www.google.com">Go to Google</a>
</div>
<label>
<input type="checkbox" />Enable link</label>
JS
$('.disabled > a').click(function (e) {
e.preventDefault();
e.stopPropagation();
alert('should stop working');
});
$('input[type=checkbox]').change(function () {
$('.container').removeClass('disabled');
});
很多人都解释说e.stopPropagation()可以防止事件冒泡.但是,我很难找到为什么人们想要或者想要首先阻止事件冒泡.
在我的网站上,我有许多元素,如下所示:
$(document.body).on('click', ".clickable", function(e){
//e.stopPropagation();
//do something, for example show a pop-up or click a link
});
<body>
<p>outside stuff</p>
<button type="button" class='clickable'>
<img src='/icon.jpg'> Do Something
</button>
</body>
我想添加e.stopPropagation()因为我想要将事件处理程序更改'touch'为'click'使用这个真棒触摸库Hammer.js..这将允许点击在桌面上正常发生以及在移动设备上进行触摸事件.
这个问题(请纠正我,如果我错了)是触摸设备上的滚动减慢停止.
这e.stopPropgation()有用吗？这样,无论何时触摸屏幕 - document.body事件冒泡都不会每次都发生？
javascript jquery javascript-events event-bubbling stoppropagation
在阅读了有关最佳性能 JavaScript 的文章后，我了解到最好尽量减少与 DOM 的交互，并更多地依赖 JavaScript 本身的逻辑。
其中一部分是对元素列表使用单个事件侦听器并读取点击目标，而不是对每个元素使用一个事件侦听器
ul#menu
li#one One
li#two Two
li#three Three
$ul = document.getElementById('#menu')
$ul.addEventListener('click', function(e) {
if (e.target.id == ...) { ... } // You get the idea
})
我有一个网站，有几个导航栏、几个下拉按钮等。那么为什么不在主体上创建一个事件侦听器并只查看事件目标呢？
document.body.addEventListener('click', function(e) {
if (e.target.id == ...) { ... };
})
从技术角度我无法判断这个解决方案有什么问题。有些东西对我来说似乎太重了，它有一种代码的味道。
这在移动设备上会有问题吗？DOM 含量高的本质是否<body>最终对性能造成的损害大于好处？
我没有使用 jQuery，请建议纯 JS 解决方案。
请让我知道以下内容之间的区别。
我对这种行动是陌生的。
$('#myButton').on('click', function () {
// Some code
});
和
$(document).on('keyup', '#myButton', function () {
// Some Code
});
和
$('#myButton').click(function () {
//Some code
});
我有一个PHP管理仪表板,其中使用了bootstrap主题.我们知道它有内置的jQuery对象,如下拉菜单,折叠,制表符等等.如果我们刚刚添加了bootstrap js文件,它们都可以工作.
现在问题是当我从ajax调用获取内容并将其显示在我的页面上时,通过ajax加载的所有javascript控件都无法正常工作.
我使用这个ajax调用显示所有内页.所以它可能对加载的HTML有任何bootstrap javascript控件.
那么如何在每个ajax调用上动态修复此问题.我的ajax加载javascript在下面
$('a').bind('click',function(event){
event.preventDefault();
$.get(this.href,{},function(response){
$('#app-content-body').html(response)
});
});
注意:我的问题不在上面的代码中.当我从上面的代码加载html内容时,实际问题是bootstrap javascript控件无法正常工作