一个选择器对应多个事件处理程序的JQuery.on()方法

tzxcd3kk 于 2022-12-18 发布在 jQuery

关注(0)|答案(6)|浏览(214)

尝试弄清楚如何使用Jquery .on（）方法和一个特定的选择器，该选择器有多个关联的事件。我以前使用过.live（）方法，但不太确定如何使用.on（）完成同样的任务。请看下面的代码：

$("table.planning_grid td").live({
  mouseenter:function(){
     $(this).parent("tr").find("a.delete").show();
  },
  mouseleave:function(){
     $(this).parent("tr").find("a.delete").hide();        
  },
  click:function(){
    //do something else.
  }
});

我知道我可以通过调用以下命令来分配多个事件：

$("table.planning_grid td").on({
    mouseenter:function(){  //see above
    },
    mouseleave:function(){ //see above
    }
    click:function(){ //etc
    }
  });

但我相信.on（）的正确用法应该是这样的：

$("table.planning_grid").on('mouseenter','td',function(){});

型
有什么方法可以实现这个目标吗？或者这里的最佳实践是什么？我尝试了下面的代码，但没有骰子。

$("table.planning_grid").on('td',{
   mouseenter: function(){ /* event1 */ }, 
   mouseleave: function(){ /* event2 */ },
   click: function(){  /* event3 */ }
 });

jquery

来源：https://stackoverflow.com/questions/8608145/jquery-on-method-with-multiple-event-handlers-to-one-selector

6条答案

按热度按时间

dfuffjeb1#

正好相反，你应该写：

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");

赞(0）回复(0）举报 2022-12-18

tv6aics12#

此外，如果将多个事件处理程序附加到执行同一函数的同一选择器，则可以使用

$('table.planning_grid').on('mouseenter mouseleave', function() {
    //JS Code
});

赞(0）回复(0）举报 2022-12-18

zazmityj3#

如果要对不同的事件使用相同的函数，可以使用以下代码块

$('input').on('keyup blur focus', function () {
   //function block
})

赞(0）回复(0）举报 2022-12-18

yws3nbqq4#

我从here中学到了一些非常有用和基本的东西。

链接函数在这种情况下非常有用，它适用于大多数jQuery函数，包括on函数输出。

它之所以有效，是因为大多数jQuery函数的输出都是输入对象集，因此您可以立即使用它们，并使其更短、更智能

function showPhotos() {
    $(this).find("span").slideToggle();
}

$(".photos")
    .on("mouseenter", "li", showPhotos)
    .on("mouseleave", "li", showPhotos);

赞(0）回复(0）举报 2022-12-18

hjzp0vay5#

您可以通过以下方式合并相同的事件/功能：

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    'click blur paste' : function() {
        // Handle click...
    }
}, "input");

赞(0）回复(0）举报 2022-12-18

p4rjhz4m6#

请尝试以下代码：

$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change', 
  function() {

  }
);

赞(0）回复(0）举报 2022-12-18

我来回答

一个选择器对应多个事件处理程序的JQuery.on()方法

6条答案

相关问题

热门标签

最新问答