events - jQuery একাধিক ইভেন্ট একই ফাংশন ট্রিগার





javascript-events (9)


আপনি যদি একই ঘটনা হ্যান্ডলারকে বেশ কয়েকটি ইভেন্টে সংযুক্ত করেন তবে আপনি প্রায়ই একবারে একাধিক বার ফায়ারিংয়ের সমস্যা চালায় (উদাহরণস্বরূপ ব্যবহারকারীর সম্পাদনা করার পরে ট্যাব টিপুন; কীডাউন, পরিবর্তন এবং ব্লার সমস্ত অগ্নি হতে পারে)।

আপনি আসলে যা চান তা শোনাচ্ছে:

$('#ValidatedInput').keydown(function(evt) {
  // If enter is pressed
  if (evt.keyCode === 13) {
    evt.preventDefault();

    // If changes have been made to the input's value, 
    //  blur() will result in a change event being fired.
    this.blur();
  }
});

$('#ValidatedInput').change(function(evt) {
  var valueToValidate = this.value;

  // Your validation callback/logic here.
});

keyup , keypress , blur এবং change ইভেন্টগুলির একটি উপায় আছে কি একই ফাংশনকে এক লাইনে কল করে বা আমাকে আলাদাভাবে করতে হয়?

সমস্যাটি আমার কাছে আছে যে আমাকে কিছু তথ্য ডিবি সন্ধানের সাথে যাচাই করতে হবে এবং এটি নিশ্চিত করতে চাইলে যে কোন ক্ষেত্রেই যাচাইকরণ মিস করা হয় না, তা বাক্সে টাইপ করা বা আটকে রাখা হোক কিনা।




আপনি বিভিন্ন ঘটনা ফাংশন সংযুক্ত করার জন্য বাঁধ পদ্ধতি ব্যবহার করতে পারেন। এই কোডের মতো ইভেন্ট নাম এবং হ্যান্ডলার ফাংশনটি পাস করুন:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

আরেকটি বিকল্প jquery api এর চেইন সমর্থন ব্যবহার করা হয়।




আপনি নীচের হিসাবে পুনঃব্যবহার করতে চান যে ফাংশন সংজ্ঞায়িত করতে পারে:

var foo = function() {...}

এবং পরে আপনি আপনার অবজেক্টে চান এমন অনেক ইভেন্ট শ্রোতা সেট করতে পারেন যেটি ('ইভেন্ট') ব্যবহার করে যে ফাংশনটি নীচে দেখানো হয়েছে সেটি ব্যবহার করে ট্রিগারটি ট্রিগার করতে:

$('#selector').on('keyup keypress blur change paste cut', foo);



তাটু দ্বারা উত্তরটি আমি কীভাবে সহজবোধ্যভাবে করব তা হল, তবে ইন্টারনেট এক্সপ্লোরারে এই সমস্যাগুলি ঘিরে / বন্ধ করার মতো কিছু সমস্যা হয়েছে, যদিও এটি .on() পদ্ধতির মাধ্যমে করা হয়।

আমি ঠিক jQuery এর কোন সংস্করণ pinpoint করতে সক্ষম হয়েছে এই সমস্যা হয় না। কিন্তু আমি মাঝে মাঝে নিম্নলিখিত সংস্করণে সমস্যাটি দেখি:

  • 2.0.2
  • 1.10.1
  • 1.6.4
  • মোবাইল 1.3.0b1
  • মোবাইল 1.4.2
  • মোবাইল 1.2.0

আমার workaround প্রথম ফাংশন সংজ্ঞায়িত করা হয়েছে,

function myFunction() {
    ...
}

এবং তারপর পৃথকভাবে ঘটনা হ্যান্ডেল

// Call individually due to IE not handling binds properly
$(window).on("scroll", myFunction);
$(window).on("resize", myFunction);

এটি সবচেয়ে সুন্দর সমাধান নয়, তবে এটি আমার জন্য কাজ করে, এবং আমি মনে করি আমি এই সমস্যাটির উপর চাপিয়ে ফেলতে অন্যদের সাহায্য করতে সেখানে রাখব




আপনি একাধিক ইভেন্টে একটি ফাংশন বাঁধতে .on() ব্যবহার করতে পারেন:

$('#element').on('keyup keypress blur change', function(e) {
    // e.type is the type of event fired
});

অথবা স্বাভাবিক ইভেন্ট ফাংশনে প্যারামিটার হিসাবে ফাংশনটি পাস করুন:

var myFunction = function() {
   ...
}

$('#element')
    .keyup(myFunction)
    .keypress(myFunction)
    .blur(myFunction)
    .change(myFunction)



এই আমি এটা কিভাবে।

$("input[name='title']").on({
    "change keyup": function(e) {
        var slug = $(this).val().split(" ").join("-").toLowerCase();
        $("input[name='slug']").val(slug);
    },
});



"কি keyup , keypress , blur এবং change ইভেন্টগুলির একটি উপায় আছে একই ফাংশনটিকে এক লাইনে কল করতে?"

এটি .on() ব্যবহার করে সম্ভব, যা নিম্নলিখিত কাঠামো গ্রহণ করে: .on( events [, selector ] [, data ], handler ) , যাতে আপনি এই পদ্ধতিতে একাধিক ইভেন্ট পাস করতে পারেন। আপনার ক্ষেত্রে এটি এইরকম হওয়া উচিত:

$('#target').on('keyup keypress blur change', function(e) {
    // "e" is an event, you can detect the type of event using "e.type"
});

এবং এখানে লাইভ উদাহরণ:

$('#target').on('keyup keypress blur change', function(e) {
  console.log(`"${e.type.toUpperCase()}" event happened`)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="target">




$("element").on("event1 event2 event..n", function() {
   //execution
});

এই টিউটোরিয়াল একাধিক ইভেন্ট পরিচালনা সম্পর্কে।




উপাদান স্থাপন করা হয় "MAIN" ক্লাস নোট নিন, উদাহরণস্বরূপ,

<div class="container">
     <ul class="select">
         <li> First</li>
         <li>Second</li>
    </ul>
</div>

উপরের দৃশ্যটিতে, jQuery মুখ্য বস্তুটি "কন্টেইনার" দেখতে হবে।

তারপরে আপনি মূলত উপ, li , এবং select হিসাবে ধারক অধীনে উপাদান নাম থাকবে:

$(document).ready(function(e) {
    $('.container').on( 'click',".select", function(e) {
        alert("CLICKED");
    });
 });




jquery events javascript-events