标签: jquery-on

在我正在构建的站点的首页上,有几个<div>使用CSS :hover伪类在鼠标悬停时添加边框.其中一个<div>包含一个<form>,使用jQuery,如果其中的输入具有焦点,将保持边界.除了IE6不支持:hover除<a>s 之外的任何元素之外,这完全有效.所以,对于这个浏览器,我们只使用jQuery来模拟:hover使用该$(#element).hover()方法的CSS .唯一的问题是,现在的jQuery处理两种形式focus() 和 hover(),当输入具有焦点,则用户移动鼠标或缩小,边界消失.

我以为我们可以使用某种条件来阻止这种行为.例如,如果我们测试鼠标输出是否有任何输入有焦点,我们可以阻止边界消失.AFAIK,:focusjQuery中没有选择器,所以我不确定如何实现这一点.有任何想法吗？

这是来自哪里

当我第一次学习jQuery时,我通常会附加这样的事件:

$('.my-widget a').click(function() {
    $(this).toggleClass('active');
});

在了解了有关选择器速度和事件委托的更多信息之后,我在几个地方读到"jQuery事件委托将使您的代码更快".所以我开始编写这样的代码:

$('.my-widget').on('click','a',function() {
    $(this).toggleClass('active');
});

这也是复制已弃用的.live()事件行为的推荐方法.这对我很重要,因为我的很多网站都在动态添加/删除小部件.上面的行为与.live()的行为完全不同,因为只有添加到现有容器".my-widget"的元素才会获得行为.如果我在代码运行后动态添加另一个html块,那么这些元素将不会获取绑定到它们的事件.像这样:

setTimeout(function() {
    $('body').append('<div class="my-widget"><a>Click does nothing</a></div>');
}, 1000);

我想要实现的目标:

1. .live()的旧行为//意味着将事件附加到尚未存在的元素
2. .on()的好处
3. 绑定事件的最快性能
4. 管理事件的简单方法

我现在附上所有这样的事件:

$(document).on('click.my-widget-namespace', '.my-widget a', function() {
    $(this).toggleClass('active');
});

这似乎符合我的所有目标.(是的,因为某种原因它在IE中速度较慢,不知道为什么？)它很快,因为只有一个事件与单个元素相关联,而二级选择器仅在事件发生时进行评估(如果这里错误,请纠正我).命名空间非常棒,因为它可以更容易地切换事件监听器.

我的解决方案/问题

所以我开始认为jQuery事件应该始终绑定到$(document).
你有什么理由不想这样做吗？
这可算是最佳做法吗？如果没有,为什么？

如果您已经阅读了这一切,谢谢.我感谢任何/所有反馈/见解.

假设:

1. 使用支持.on()//至少1.7版的jQuery
2. 您希望将事件添加到动态添加的内容中

读数/例子:

1. http://24ways.org/2011/your-jquery-now-with-less-suck
2. http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
3. http://www.jasonbuckboyer.com/playground/speed/speed.html
4. http://api.jquery.com/on/

我有一个使用jquery-ui-dialog的页面.每次打开对话框时,都会使用ajax加载页面内容.然后它使用jquery"on()"绑定一些事件.当对话框关闭时,它将清空其内容.

问题是,我是否需要在$ .empty()之前取消绑定".ajax-content"上的事件？

编辑: 关注1.任何可能降低JS性能？如果我以这种方式清空()数百个节点.

关注2.将删除元素还从内存中删除事件(或任何jquery的执行/评估链)？

我现在没有对他们做任何事情.如果对话框多次打开/关闭而没有页面刷新,是否会导致任何问题？

代码看起来像这样:

<div id="jquery-dialog" class="container">
  <div class="ajax-content">
    some buttons....
  </div>
</div>

------after each ajax load------------
$(".ajax-content").on("click", ".button", function(event) {
  //handles the click
});

------on dialog close------------
$("#jquery-dialog").empty();

我用于live()生成的页面和框架.但是在jQuery 1.9此函数中已弃用且不起作用.

我使用on()而不是,live()但这种方法工作一次,并不在帧中工作.

我的代码看起来像这样:

  $("#element").live('click',function(){
    $("#my").html(result);
   });

解决办法是什么？

我还没有看到这个函数的来源,但我想知道,它是否像这样工作:

1. 通过其选择器选择元素
2. 将提供的事件处理程序委托给他们
3. setInterval在该选择器上运行并不断取消委托,然后重新委派相同的事件

或者对此有一个纯JavaScript DOM解释？

是否可以使用jquery .on()方法而不是.delegate()没有要监听的事件？

根据.on()文件:

.on(events [,selector] [,data],handler(eventObject))

该events参数是不可选的.

使用.on()/ .delegate()是动态添加元素.

我想点击按钮2来触发按钮1上的点击事件.

但是,当我尝试以下操作时,点击#2时没有任何反应:#1或#2没有警报.

HTML:

<div id="container">
<button id="button-1">Button 1</button>
<button id="button-2">Button 2</button>
</div>

JS:

$('#container').on( "click", '#button-1', function(e){
    alert('CLICKED 1');
});
$('#container').on( "click", '#button-2', function(e){
    $('#button-1').trigger(e);
    alert('CLICKED 2');
});

http://jsfiddle.net/8RnBf/7/

而且,如果我在触发器之前发出#2警报,我最终会得到一个无限循环.

http://jsfiddle.net/8RnBf/6/

为什么这不按预期工作？

更新:

我应该说清楚:原始事件必须通过.从本质上讲,我们正在尝试做这里所做的事情,但是委托事件

问题:每次触发的事件blur和keyup事件都是onload,只有onload.我怎样才能使它们正常工作？

jQuery的:

function myFunction(text){
    alert(text);
}
$('#input1').on({
    keyup: myFunction('keyup'),
    blur: myFunction('blur'),
    focus: function(){console.log('focus!');}
});

小提琴:http://jsfiddle.net/GrMQX/

所以我有一个具有以下结构的页面

<div class="editCampaignBanner">
    <div>
    <hr>
    <label for="file">Upload a new image</label>
    <input id="file" type="file" name="file" class="valid">
    <label for="NewImageURLs">Link URL (Optional)</label>
    <input id="NewImageURLs" type="text" value="" name="NewImageURLs">
    <hr>
    </div>
</div>

我写了一些jquery:

$('div.editCampaignBanner input:file').on('change', function () {
        var value = $(this).val();
        var div = $(this).parent();
        var html = '<div>'+ div.html() + '</div>';
        if (value.length > 0) {
            div.after(html);
        }
        else if ($(this) > 1) {
            div.remove();
        }
    });

所以当我在文件中输入一个元素时,它会在前一个元素下生成一个div:

    <div class="editCampaignBanner">
        <div>
        <hr>
        <label for="file">Upload a new image</label>
        <input id="file" type="file" name="file" class="valid">
        <label …

当元素包含通过CSS动画的另一个元素时,transition偶尔不会触发单击事件.

测试用例:http://codepen.io/anon/pen/gbosy

我有一个布局,其中一系列图像具有在悬停时显示的标题.点击它们会触发.slideDown相邻元素.他们自己可能会被用户快速点击.这个问题在实时网站上比在codepen中更加引人注目.

在codepen中,大约90%的点击都被遵守,而当CSS过渡被禁用时,100%被遵守.

欢迎任何建议.

我应该注意到这个问题在Chrome中最容易复制,在Safari中不太常见,在Firefox中也很少见.