标签: jquery-on

我正在尝试将hoverIntent插件添加到我页面上的元素中,但是稍后会将一些元素添加到DOM中,这意味着我必须将插件绑定到将来的元素.你是怎样做的？我已经在SO上看过几次同样的问题了,但是没有人有明确的解决方案吗？

我知道有.on,并.live (deprecated)可以从JQuery的,但这些假设你想增加事件处理程序动态添加的元素,我不的一个或多个事件.我只需要引用它,这样我就可以访问它的一些属性.

更具体地说,有多个这样的动态元素都带有class="cluster"set,每个动态元素都有:title属性,top属性和left属性的不同值.

这些jquery选项都不起作用:

var allClusters = $('.cluster');
var allClusters2 = $('#map').children('.cluster');
var allClusters3 = $('#map').find('.cluster');

同样,我不想附加任何事件处理程序,所以.on即使我劫持它,添加一个虚假事件,一个doNothing处理程序,然后只是引用我的属性,似乎不是正确的解决方案.
必须有一个更好的解决方案.有任何想法吗？

更新:
我错误地说明了标题,因为我的意思是说元素是动态添加到DOM的,而不是通过JQuery.标题已更新.

我正在将输入动态添加到我的页面中,因此需要使用它.on来附加事件.

我正在尝试将change事件附加到a type="file" input,但它只是不起作用.

我试过两种方法,第一种:

$('.container').on('change', '.file-input-hidden' , function(){

输入有一个类file-input-hidden.

第二个:

$('.container').on('change', 'input[type="file"]' , function(){

但是当用文件选择/更改文件时,都不会激活该功能input.

出了什么问题？

编辑:

在这里查看页面:链接

和js:

$('.container').on('click', '.file-browse' , function(){
    var thisone = $(this).attr('id');
    $('input[name="input-'+ thisone+'"]').click();
});

$('.file-input-hidden').on('change', function(){
    var thetext = $(this).val();
    var thetextsplit = thetext.split('\\').pop();
    var thisone = $(this).attr('name').split('-').pop();
    if($('.file-info').text() == thetextsplit){
        alert('you have already selected this file');
        $(this).replaceWith( $(this).val('').clone( true ) );
    }
    else{
        $('#info-'+ thisone).text(thetextsplit);
        $('#clear-'+ thisone).fadeIn(100);
        var emptyinputs = $('.file-info:empty').length;
        if(emptyinputs …

我正在尝试使用events-map创建一个.on()方法.我想改变这个:$("ul").on("click", "li", function() {...});这样的事情:

$("ul").on({
    click: function() {...},
    mouseenter: function() {...},
    mouseleave: function() {...}
});

我在哪里将选择器"li"放在事件图中？

我有一个页面,我列出我的船员(show_crew.php).该页面使用无限滚动插件运行,就像Google Images一样.首先,我显示10个条目.如果用户到达show_crew.php的底部,则会将旧的"show_crew.php"附加到旧的"show_crew.php",显示接下来的10个条目.

我在show_crew.php中嵌入了一些Jquery函数,我通过它绑定事件

$('body').on('click', 'myButton[rel=<? echo $user['id'] ?>]', function() {
    console.log('foo');
})?

现在,由于show_crew.php被多次追加,因此该事件也多次绑定到同一按钮.我可以通过$('body').off('click', 'myButton')EACH TIME 解决这个问题.

这看起来很难看.有更优雅的方式吗？

谢谢,亚光

可能重复:
jQuery 1.7 - 将live()转换为on().live
()vs .on()方法

我有以下代码(我已经简化了这个),它与jquery-1.7一起运行良好.

$("td.ui-datepicker-week-col a").live("click", function () {
    alert("hello");
});

我正在尝试升级我的代码,所以我可以升级我的jQuery包版本,所以我把它改成了这个.

$("td.ui-datepicker-week-col").on("click", "a", function () {
    alert("hello");
});

但这并没有做任何事情.它不会抛出任何错误,所以我无法看到问题所在.

有任何想法吗？

这是演示我的情况的简单小提琴......

http://jsfiddle.net/UnsungHero97/EM6mR/17/

我正在做的是使用添加当前和未来元素的事件处理程序.on().我希望能够在发生某些事情时为特定元素删除这些事件处理程序; 在小提琴的情况下,当选择单选按钮时,应删除蓝色元素的事件处理程序,并且单击这些元素不应再执行任何操作.

它似乎没有工作:(

如何删除附加到document我.on()为那些特定蓝色元素创建的事件处理程序？

我注意到$('#firstId')当javascript本身完成更改时,事件没有触发.

这是为什么？

还有办法让事件发生吗？

这是一个例子:

$('#firstId').on('change input paste', function(){
  console.log("this is the input event being fired");
});

$('#randomButton').on('click', function(){
  $('#firstId').val(Math.floor(Math.random()*2147483647 )+1);
  console.log("randomButton being fired");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span for="firstId">number: </span>
<input type="number" id="firstId"/>
<p>Or</p>
<button id="randomButton">Get a random number</button><br>

我有奇怪的问题。起初我不想使用 .on() 方法，因为我根本无法让它工作，所以我使用了 .live()。

现在，我正在编写一个新的 jQuery 脚本，并且我大量使用了 .on() 并且它有效。到目前为止。

jQuery代码：

   $('#artistList a').on('click',function(e){
    console.log($(this).parent().text());
    e.preventDefault();
   });

HTML代码：

<div id="artistList">
 <div class="artist"><a class="delete" href="#"></a>Psy</div>
 <div class="artist"><a class="delete" href="#"></a>Fernanda Martins</div>
 <div class="artist"><a class="delete" href="#"></a>DJ Nreal</div>
</div>

也试过这个方法：

   $('#artistList>a').on('click',function(e){
   $('.delete').on('click',function(e){

没运气。我错过了什么？

这是唯一不起作用的部分

我已经阅读了关于 .on() 的文档，并基于此，这应该有效。另外，我使用的是最新的 jQuery (jquery-1.8.3.min.js)。

编辑

<a>元素在 CSS 中有一个width: 15pxand height: 15px，所以它们是可见的。

目前,我有一个缓存变量,$this我正在申请.on响应各种可能类型的行为触发器.

$this.on('click','.trigger a',rowTrigger);
$this.on('click','.actions nav a',rowAction);

在jQuery .on Documentation中,它没有提到是否有办法将上述两个组合成一个单独的调用.例如,像这样的东西可能会很好:

$this.onAny({
    click: [
        {'.trigger a':rowTrigger},
        {'.actions nav a':rowAction}
    ]
});

有没有办法实现这种声明(例如现有的扩展插件.on)？

UPDATE

用例(在当前代码中,在一个很好的解决方案之前):

// Plugin 1:
function addTriggers(){
  $this.find('td:last').append('<span class="trigger"><a href="#"></a></span>');
  return {selector:'.trigger a', event:'click', target: $this, callback: rowTrigger};
}

// Plugin 2:
function addInlineNavigation(){
  $navCode = '...'
  $this.find('td:last').append('<div class="actions">'+$navCode.html()+'</div>');
  return {selector:'.actions nav a', event:'click', target: $this, callback: rowAction};
}