এক নির্বাচকের একাধিক ইভেন্ট হ্যান্ডলার সহ JQuery .on () পদ্ধতি

Question

একটি নির্দিষ্ট নির্বাচক যার সাথে এর সাথে যুক্ত রয়েছে একাধিক ইভেন্ট রয়েছে তার সাথে জ্যাকারি .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>উপাদানের পরিবর্তে ইভেন্টটিকে তার সাথে আবদ্ধ করা উচিত , যা সত্যই সঠিক পথে যাওয়া।

— ফ্রিডরিক হামিদী

<ও টেবিল> তে না .on ব্যবহার করার একটি ভাল কারণ আছে এবং এটি আপনি পরে <td> গুলি পরে গতিতে যুক্ত করলে এটি হয়। '(' টেবিল টিডি ')। ... ... আপনি কেবলমাত্র এই ফাংশনটি কল করার মুহূর্তে টেবিলের মধ্যে থাকা <td> প্রভাবিত করবেন। '(' টেবিল ') .এ (...,' টিডি ', ফাংশন ...) কোনও <td> প্রভাব ফেলবে আপনি পরে এই টেবিলটিতে যুক্ত করবেন।

— রায়ানন

@ রায়ানান, প্রকৃতপক্ষে, এবং এছাড়াও প্রতিটি ইভেন্টের হ্যান্ডলারের একটি রেজিস্টারে একটি ছোট খরচ হলেও, একটি ব্যয় থাকে has আপনি যখন কয়েক হাজার কোষের সাথে লেনদেন করছেন, তখন উপাদান <table>অনুসারে একজন হ্যান্ডলারের পরিবর্তে একটি একক হ্যান্ডলারের নিবন্ধন করা <td>ব্যবহারযোগ্য কর্মক্ষমতা অর্জনের জন্য বাধ্যতামূলক হয়ে যায়।

— ফ্রিডরিক হামিদী

একমত। 'উপর' হিসেবে এই প্রশ্ন google খুব কঠিন ধরনের একটি বহুল ব্যবহৃত শব্দ এবং সবচেয়ে ফলাফল এর সাথে সম্পর্কিত করা হয় .bindএবং .live। ভাল উত্তর, ঠিক আমি যা খুঁজছিলাম: ডি @ ফ্রিডরিক - আপনার লিঙ্কটি idআর jquery ডক্স পৃষ্ঠায় কোনও শিরোনামের সাথে লিঙ্ক করে না । সম্ভবত আপডেট হওয়া ডকুমেন্টেশনের ফলাফল। তবে আমি এই পৃষ্ঠায় এই উত্তরটি খুঁজে পাইনি।

— nzifnab

Answer 2

এছাড়াও, যদি আপনার একই নির্বাচিত একই ফাংশনটি সম্পাদন করে একাধিক ইভেন্ট হ্যান্ডলার সংযুক্ত থাকে তবে আপনি ব্যবহার করতে পারেন could

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

Comments

এটিই আমি খুঁজছিলাম

— রোজা

... এবং তারপরে e.type সহ প্রকৃত বরখাস্ত ইভেন্টের प्रकारটি পান (ইভেন্টটিকে প্যারামিটার হিসাবে যুক্ত করার পরে, অর্থাৎ ... ফাংশন (ঙ) ...

— উইলিয়াম টি। ম্যালার্ড

Answer 3

আপনি যদি বিভিন্ন ইভেন্টে একই ফাংশনটি ব্যবহার করতে চান তবে নীচের কোড ব্লকটি ব্যবহার করা যেতে পারে

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

Answer 4

আমি এখান থেকে সত্যিই দরকারী এবং মৌলিক কিছু শিখেছি ।

chaining ফাংশন এই ক্ষেত্রে যা সহ সবচেয়ে 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() {

  }
);