एक चयनकर्ता के लिए कई ईवेंट हैंडलर्स के साथ JQuery .on () विधि

Question

एक विशिष्ट चयनकर्ता के साथ 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 */ }
 });

अग्रिम में धन्यवाद!

Answer 1

वह दूसरा रास्ता है । आपको लिखना चाहिए:

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

Comments

चयनकर्ता क्यों नहीं है $("table.planning_grid td")?

— मूवर्स

@ मायर्स, यह भी काम करेगा और प्रश्नकर्ता ऐसा मानता है, लेकिन यह भी मानता है कि उसे <table>प्रत्येक व्यक्तिगत <td>तत्व के बजाय घटना को बांधना चाहिए , जो वास्तव में जाने का सही तरीका है।

— Frédéric Hamidi

<तालिका> पर .on का उपयोग करने का एक अच्छा कारण है और <td> पर नहीं है और यदि आप गतिशील रूप से बाद में <td> जोड़ते हैं तो यह अच्छा है। $ ('टेबल td')। on ... केवल <td> पर प्रभाव डालेगा, जिस क्षण आप इस फ़ंक्शन को कहते हैं। $ ('तालिका')। (..., 'td', फ़ंक्शन ...) किसी भी <td> को प्रभावित करेगा। आप बाद में इस तालिका में जोड़ देंगे।

— राणण

@ रैन, वास्तव में, और इसके अलावा हर ईवेंट हैंडलर में एक रजिस्टरों की लागत होती है, भले ही वह छोटा हो। जब आप हजारों कोशिकाओं के साथ काम कर रहे होते हैं, तो <table>प्रति <td>तत्व एक हैंडलर के बजाय एक ही हैंडलर को पंजीकृत करना प्रयोज्य प्रदर्शन को प्राप्त करने के लिए अनिवार्य हो जाता है।

— Frédéric Hamidi

माना। इस प्रश्न को 'ऑन' के रूप में समझना बहुत मुश्किल है, यह एक सामान्य शब्द है और अधिकांश परिणाम .bindऔर से संबंधित थे .live। अच्छा जवाब, बस मैं क्या देख रहा था: D @ Frédéric - आपका लिंक idअब jquery डॉक्स पृष्ठ पर एक हेडर से लिंक नहीं करता है । शायद अद्यतन प्रलेखन का एक परिणाम है। लेकिन मुझे यह जवाब उस पेज पर नहीं मिला।

— nzifnab

Answer 2

इसके अलावा, यदि आपके पास एक ही फ़ंक्शन को निष्पादित करने वाले एक ही चयनकर्ता से जुड़े कई ईवेंट हैंडलर हैं, तो आप उपयोग कर सकते हैं

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

Comments

यह वही है जिसकी मैं तलाश कर रहा था

— RozzA

... और फिर e.type के साथ वास्तविक निकाल दिया गया ईवेंट प्रकार प्राप्त करें (ईवेंट को एक पैरामीटर के रूप में जोड़ने के बाद, अर्थात ... फ़ंक्शन (ई) ...

— विलियम टी। मलार्ड

Answer 3

यदि आप अलग-अलग घटनाओं पर एक ही फ़ंक्शन का उपयोग करना चाहते हैं, तो निम्न कोड ब्लॉक का उपयोग किया जा सकता है

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

Answer 4

मैंने यहां से वास्तव में उपयोगी और मौलिक कुछ सीखा ।

चैनिंग फ़ंक्शन इस मामले में बहुत उपयोगी है जो फ़ंक्शन आउटपुट पर भी अधिकांश jQuery फ़ंक्शंस पर काम करता है।

यह काम करता है क्योंकि अधिकांश jQuery फ़ंक्शंस के आउटपुट इनपुट ऑब्जेक्ट सेट होते हैं ताकि आप उन्हें तुरंत उपयोग कर सकें और इसे छोटा और स्मार्ट बना सकें

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

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

Answer 5

और आप इस तरह से एक ही घटना / कार्यों को जोड़ सकते हैं:

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

Answer 6

निम्नलिखित कोड के साथ प्रयास करें:

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

  }
);