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

Question

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

আমার সমস্যাটি হ'ল আমাকে একটি ডিবি লুকআপের সাথে কিছু তথ্য যাচাই করা দরকার এবং তা নিশ্চিত করতে চাই যে কোনও অবস্থাতেই বৈধতাটি মিস করা হয়নি, তা টাইপ করা আছে বা বাক্সে আটকানো হয়েছে কিনা।

Answer 1

আপনি .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)

Comments

স্থানকে পৃথক করা ইভেন্টগুলির সাথে আপনি কীভাবে নামের ব্যবধান অন্তর্ভুক্ত করবেন? .on('keyup.foo keypress.foo blur.foo change.foo', …)বা .on('keyup keypress blur change .foo', …)?

— সুকিমা

এটির সাথে সমস্যাটি হ'ল মাই ফাংশন সম্ভবত একাধিকবার কল হবে যা আপনি আটকাতে চাইতে পারেন।

— এগার এগার

এই ফাংশনটিতে আমি কীভাবে প্যারামিটারটি পাস করতে পারি?

— কুশলভম

@ এসগার যাইহোক এটি করতে? মোবাইলে আমার সবসময় দরকার on('click tap', e => {...})। শ্রোতার দ্বিগুণ ট্রিগার হতে পারে, আমি একবার একবার ট্রিগার করতে চাই, শ্রোতার ফাংশনে আমি কীভাবে কোড করব?

— টমিশন

@ টমলেশন সম্ভবত ডাকা ফাংশনটির উপাদানটিতে একটি ক্লাসের নাম 'ব্যস্ত' যুক্ত করুন এবং $('#element:not(.busy)').on('keyup keypress blur change', function(e){…});শেষ পর্যন্ত ক্লাসনেম 'ব্যস্ত' মুছে ফেলুন।

— এসগার

Answer 2

JQuery 1.7 হিসাবে, .on()পদ্ধতিটি কোনও নথিতে ইভেন্ট হ্যান্ডলার সংযুক্ত করার জন্য পছন্দসই পদ্ধতি। পূর্ববর্তী সংস্করণগুলির জন্য, .bind()পদ্ধতিটি ইভেন্টের হ্যান্ডলারকে সরাসরি উপাদানগুলিতে সংযুক্ত করার জন্য ব্যবহৃত হয়।

$(document).on('mouseover mouseout',".brand", function () {
  $(".star").toggleClass("hovered");
})

Comments

এটি কোনও প্রতিনিধি ইভেন্টের জন্য করা হয়, এটি কাজ করবে, তবে এটি করার সহজ উপায় নয়, সবচেয়ে কার্যকরও নয়।

— বেন টালিডিয়োরোস

ইভেন্টের প্রতিনিধি গুরুত্বপূর্ণ, এবং কখন স্ক্রিপ্টটি লোড / চালিত হবে এবং স্ক্রিপ্টটি লোড / চালিত হওয়ার সময় ডিওএম-তে উপাদানগুলি উপস্থিত থাকলে তার উপর নির্ভর করে (বা নাও) প্রয়োজন হতে পারে।

— এলোমেলো_উজার_নাম

Answer 3

JQuery একবারে বেশ কয়েকটি ইভেন্টের জন্য শোনার পরে আমি ইভেন্টের ধরণ পাওয়ার জন্য একটি উপায় খুঁজছিলাম এবং গুগল আমাকে এখানে রাখে।

সুতরাং, আগ্রহীদের জন্য, event.typeআমার উত্তর:

$('#element').on('keyup keypress blur change', function(event) {
    alert(event.type); // keyup OR keypress OR blur OR change
});

JQuery ডকটিতে আরও তথ্য ।

Answer 4

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

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

আরেকটি বিকল্প হ'ল জ্যাকোরি এপিআই-এর চেইন সমর্থন ব্যবহার করা।

Comments

JQuery 1.7 হিসাবে, .on () পদ্ধতিটি কোনও নথিতে ইভেন্ট হ্যান্ডলার সংযুক্ত করার জন্য পছন্দসই পদ্ধতি।

— ডিজনেয়েট

Answer 5

যদি আপনি একই ইভেন্ট হ্যান্ডলারটি কয়েকটি ইভেন্টের সাথে সংযুক্ত করেন তবে আপনি প্রায়শই তাদের মধ্যে একাধিকটি একবারে গুলি চালানোর বিষয়টিতে দৌড়েন (যেমন সম্পাদনার পরে ব্যবহারকারীদের টিপুন ট্যাব; কীডাউন, পরিবর্তন এবং ঝাপসা সমস্ত আগুন)।

দেখে মনে হচ্ছে আপনি আসলে যা চান তা হ'ল:

$('#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.
});

Answer 6

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

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

Answer 7

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

var foo = function() {...}

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

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

Comments

সাধারণত আপনার উত্তরটি ব্যাখ্যা করা উচিত। কেবল কোড পেস্ট করা ওপিকে তাদের সমস্যা বা আপনার সমাধান বুঝতে সহায়তা করে না।

— লিগেরো

আমি যদি jquery ইভেন্ট গ্রাহক ফাংশন (ইভেন্ট) এ প্রথম যুক্তি প্রয়োজন? এটি কিভাবে ব্যবহার করতে?

— ডাঃ এক্স

এটি ঠিক আছে, আপনি কেবল ইভেন্ট প্যারামিটার দিয়ে ফাংশনটি ডিক্লেয়ার করতে পারেন এবং তারপরে এটি পদ্ধতির মধ্যে থেকে অ্যাক্সেস করতে পারেন। এই ঘটনাগুলি তাদের মধ্যে বস্তুটি পাস করবে। আশা করি এটা কাজে লাগবে. var foo = ফাংশন (ইভেন্ট) so কনসোল.লগ (ইভেন্ট); } $ ('# নির্বাচক')। অন ('কীপ কী কী টিপুন ব্লার চেস্ট পেস্ট কাট', ফু);

— গ্যালাক্সি এর কোডার

Answer 8

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

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

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

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

function myFunction() {
    ...
}

এবং তারপরে ইভেন্টগুলি স্বতন্ত্রভাবে পরিচালনা করুন

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

এটি সর্বোত্তম সমাধান নয়, তবে এটি আমার পক্ষে কাজ করে এবং আমি ভেবেছিলাম যে আমি অন্যদের যাতে এই সমস্যাটিতে হোঁচট খেতে পারে তাদের সহায়তা করার জন্য এটি সেখানে রেখে দেব would

Answer 9

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

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

Answer 10

সেখানে আছে একটি উপায় আছে কি 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">

Answer 11

এটি jQuery এর মতো একটি বড় লাইব্রেরি ছাড়াই অন্তর্নির্মিত DOM পদ্ধতি সহ বাস্তবায়ন করা সহজ, আপনি যদি চান তবে এটি কিছুটা বেশি কোড লাগবে - ইভেন্টের নামের একটি অ্যারেতে পুনরাবৃত্তি করুন এবং প্রত্যেকের জন্য শ্রোতা যুক্ত করুন:

function validate() {
  // ...
}

const element = document.querySelector('#element');
['keyup', 'keypress', 'blur', 'change'].forEach((eventName) => {
  element.addEventListener(eventName, validate);
});