하나의 선택기에 여러 이벤트 핸들러가있는 JQuery .on () 메소드

하나의 선택기에 여러 이벤트 핸들러가있는 JQuery .on () 메소드

---

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 */ }
 });

미리 감사드립니다!

---

그것은 다른 방법 입니다. 당신은 작성해야합니다 :

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

---

또한 동일한 기능을 실행하는 동일한 선택기에 여러 이벤트 핸들러가 첨부되어 있으면

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

---

다른 이벤트에서 동일한 기능을 사용하려면 다음 코드 블록을 사용할 수 있습니다

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

---

I learned something really useful and fundamental from here.

chaining functions is very usefull in this case which works on most jQuery Functions including on function output too.

It works because output of most jQuery functions are the input objects sets so you can use them right away and make it shorter and smarter

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

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

---

And you can combine same events/functions in this way:

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

---

Try with the following code:

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

  }
);

참고URL : https://stackoverflow.com/questions/8608145/jquery-on-method-with-multiple-event-handlers-to-one-selector