JQuery এ ইভেন্ট হ্যান্ডলার সরানোর সর্বোত্তম উপায়?


1053

আমি একজন আছে input type="image"। এটি মাইক্রোসফ্ট এক্সেলে সেল নোটের মতো কাজ করে। যদি কেউ পাঠ্য বাক্সে এই input-imageসংযুক্ত করা হয় এমন একটি সংখ্যা প্রবেশ করে তবে আমি এটির জন্য একটি ইভেন্ট হ্যান্ডলার সেটআপ করি input-image। তারপরে ব্যবহারকারী যখন ক্লিক করেন image, তখন তারা ডেটাতে কিছু নোট যুক্ত করতে কিছুটা পপআপ পান।

আমার সমস্যাটি হ'ল কোনও ব্যবহারকারী যখন পাঠ্য বাক্সে শূন্য প্রবেশ করেন, তখন আমার input-imageইভেন্ট হ্যান্ডলারটি অক্ষম করা দরকার । আমি নিম্নলিখিত চেষ্টা করেছিলাম, কিন্তু কোন ফলসই না।

$('#myimage').click(function { return false; });

উত্তর:


1626

jQuery ≥ 1.7

JQuery 1.7 এর পরে ইভেন্টের API আপডেট হয়েছে, .bind()/ .unbind()এখনও পিছনের সামঞ্জস্যের জন্য উপলব্ধ, তবে পছন্দসই পদ্ধতিটি () / অফ () ফাংশনগুলি ব্যবহার করছে। নীচে এখন হবে,

$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');

jQuery <1.7

আপনার উদাহরণ কোডে আপনি কেবল চিত্রটিতে আরেকটি ক্লিক ইভেন্ট যুক্ত করছেন, পূর্ববর্তীটি ওভাররাইড না করে:

$('#myimage').click(function() { return false; }); // Adds another click event

উভয় ক্লিক ইভেন্টগুলি তখন বরখাস্ত হয়ে যাবে।

লোকেরা যেমন বলেছে আপনি সমস্ত ক্লিক ইভেন্টগুলি সরানোর জন্য আনবাইন্ড ব্যবহার করতে পারেন:

$('#myimage').unbind('click');

যদি আপনি একটি একক ইভেন্ট যুক্ত করতে চান এবং তারপরে এটি মুছে ফেলুন (যোগ করা যেতে পারে এমন কোনও অন্যকে না সরিয়ে) তবে আপনি ইভেন্টের নাম স্পেসিং ব্যবহার করতে পারেন:

$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });

এবং আপনার ইভেন্টটি সরাতে:

$('#myimage').unbind('click.mynamespace');

6
unbind()কাজ করছে কিনা পরীক্ষা করার কোন উপায় আছে ? আমি এটি যুক্ত করেছি এবং উভয় ঘটনা এখনও গুলি চলছে।
ডেভিড ইয়েল

19
ভাল যদি উভয় ঘটনা এখনও গুলি চালানো হয় তবে অবশ্যই এটি কার্যকর হয় না not সঠিক উত্তর পেতে আপনাকে আরও তথ্য দিতে হবে। একটি পৃথক প্রশ্ন জিজ্ঞাসা করার চেষ্টা করুন।
সামজডসন

13
পুরানো উত্তর - অন্তর্ভুক্ত নামের স্থানের মতো তথ্য- তবে আমি ভুলে যাই; জিকিউ অবজেক্টটি চালু / বন্ধ করে দেয়? যদি তা হয় তবে সম্ভবত আরও একটি সম্পূর্ণ উত্তর $('#myimage').off('click').on('click',function(){...})
হ'ল

3
হ্যাঁ তারা তাই করে, তাই হ্যাঁ, আপনি যদি অন্য সমস্ত ক্লিক ইভেন্টগুলি সাফ করতে চান এবং তারপরে আপনার নিজের যোগ করতে পারেন তবে আপনি উপরের চেইন কলটি করতে পারেন।
সামজডসন

ব্যবহার .unbind()আমাকে এমন পরিস্থিতিতে সাহায্য করেছিল যেখানে আমি একগুচ্ছ চেকবাক্সগুলিতে টগল করছিলাম, তবে রিলাইজড আমি .click()বারবার হ্যান্ডলারটি পুনরায় যুক্ত করছি, যার ফলে অ্যাপ্লিকেশনটি স্তব্ধ হয়ে গেছে।
টেকব্র্যাট

63

যখন এই প্রশ্নের উত্তর দেওয়া হয়েছিল তখন এটি উপলভ্য ছিল না তবে আপনি ইভেন্টগুলি সক্ষম / অক্ষম করতে লাইভ () পদ্ধতিটিও ব্যবহার করতে পারেন ।

$('#myimage:not(.disabled)').live('click', myclickevent);

$('#mydisablebutton').click( function () { $('#myimage').addClass('disabled'); });

এই কোডটির সাথে কী ঘটবে তা হ'ল আপনি যখন #mydisablebutton ক্লিক করবেন, এটি ক্লাসটিকে # মাইমাজে উপাদানগুলিতে যুক্ত করবে। এটি এটি তৈরি করবে যাতে নির্বাচক আর উপাদানটির সাথে আর মেলে না এবং যতক্ষণ না 'অক্ষম' শ্রেণি অপসারণ করা হয় ততক্ষণ ইভেন্টটি বরখাস্ত করা হবে না ive লাইভ () নির্বাচককে আবার বৈধ করে তুলবে।

এই শ্রেণীর উপর ভিত্তি করে স্টাইলিং যুক্ত করে এর অন্যান্য সুবিধা রয়েছে।


3
ব্যবহারের দুর্দান্ত উপায় live(), আগে কখনও এটিকে ব্যবহার করার কথা ভাবেননি ... কোডিং সুবিধার পাশাপাশি, এটি দ্রুত বা বাইন্ড / আনবাইন্ড ব্যবহারের জন্য এটি কোনও অন্য সুবিধা দেয়?
চকৃত

2
আপনি যদি উপাদানগুলি যুক্ত / অপসারণ করছেন তবে বাইন্ডের ওপরে নির্দিষ্ট পারফরম্যান্স সুবিধা রয়েছে কারণ সরাসরি লাইভের সাথে বাঁধাই কেবল একবার করা হয়ে থাকে is jQuery নির্দিষ্ট উপাদানগুলিতে আবদ্ধ না হয়ে আরও লাইভ এবং প্রতিনিধি ইভেন্টগুলিতে চলেছে বলে মনে হচ্ছে।
ম্যাক অ্যান্থনি

3
লাইভ অক্ষম করতে আপনি ডাই ()
চাঁদ

9
"JQuery 1.7 হিসাবে, .live () পদ্ধতি অবমূল্যায়ন করা হয়েছে event ইভেন্ট হ্যান্ডলার সংযুক্ত করতে .on () ব্যবহার করুন। api.jquery.com/live
লুকাস পটারস্কি

12
আহা, চঞ্চল জিকুয়েরি, একদিন আপনি কোনও লোকের কাছে 300 জন প্রতিনিধি আনবেন, পরের দিন এটি অচল হয়ে পড়ে।
মিঃবোজ্যাংলেস

37

আপনি যদি কেবলমাত্র একটি ইভেন্টে প্রতিক্রিয়া জানাতে চান , নিম্নলিখিত সিনট্যাক্সটি সত্যই সহায়ক হওয়া উচিত:

 $('.myLink').bind('click', function() {
   //do some things

   $(this).unbind('click', arguments.callee); //unbind *just this handler*
 });

আর্গুমেন্টস.ক্যালি ব্যবহার করে আমরা নিশ্চিত করতে পারি যে নির্দিষ্ট কোনও বেনাম-ফাংশন হ্যান্ডলার সরানো হয়েছে এবং এইভাবে কোনও নির্দিষ্ট ইভেন্টের জন্য একক সময় হ্যান্ডলার রয়েছে। আশা করি এটি অন্যকে সহায়তা করবে।


2
একেবারে, যদিও মাঝে মাঝে আপনি হ্যান্ডলারটি আনবাউন্ড হওয়া উচিত সম্পর্কে নির্দিষ্ট যুক্তি রাখতে চাইতে পারেন (যেমন তারা প্রথমে কোনও টেক্সট বাক্স না দাওয়াত আনবাইন্ড করবেন না)।
gayyes

5
arguments.callee কঠোর মোডে অবসন্ন হয়!
zloctb

37

আনবাইন্ড ফাংশনটি ব্যবহার করে এটি করা যেতে পারে।

$('#myimage').unbind('click');

আপনি jquery এ একই বস্তু এবং ইভেন্টে একাধিক ইভেন্ট হ্যান্ডলার যুক্ত করতে পারেন। এর অর্থ একটি নতুন যুক্ত করা পুরানোগুলি প্রতিস্থাপন করে না।

ইভেন্ট হ্যান্ডলারগুলি পরিবর্তনের জন্য বেশ কয়েকটি কৌশল রয়েছে যেমন ইভেন্ট নামস্থানসমূহ। অনলাইন ডক্সে এটি সম্পর্কে কিছু পৃষ্ঠা রয়েছে।

এই প্রশ্নটি দেখুন (আমি আনবাইন্ড শিখেছি কিভাবে)। উত্তরে এই কৌশলগুলির কিছু কার্যকর বর্ণনা রয়েছে।

কীভাবে jquery এ আবদ্ধ হোভার কলব্যাক ফাংশন পড়বেন


32

সম্ভবত আনবাইন্ড পদ্ধতিটি আপনার জন্য কাজ করবে

$("#myimage").unbind("click");

30

প্রোপ এবং অ্যাটর ব্যবহার করে আমাকে ইভেন্টটি বাতিল করতে হয়েছিল। আমি এক বা অন্যটির সাথে এটি করতে পারি না। আমিও .unbind কাজ করতে পারি না। আমি একটি টিডি উপাদান নিয়ে কাজ করছি।

.prop("onclick", null).attr("onclick", null)

1
আমি এটিকে ভোট দিয়েছি কারণ আমি প্রায় 30 টি মিন্টু থেকে একটি অন্বলকে বাঁধানোর চেষ্টা করছি। '.উনবাইন্ড' কাজ করেনি, '.প্রপ' কাজ করেনি, '.আউটআর' কাজ করেনি, তবে এই কৌশলটি .প্রপ এবং .ttr দু'জনে মিলে কৌতুকটি করেছিল। অস্বাভাবিক. আমি jquery 1.7.2 এর সাথে ক্রোম ব্যবহার করছি
জেরেমি

একই অবস্থা! আমি ক্লিক করুন ইভেন্ট সহজ <a> ট্যাগ থেকে অপসারণ করার চেষ্টা করেছি! এই জন্য থ্যাঙ্কস। আমার ক্ষেত্রে .প্রপ ("অনক্লিক", নাল) যথেষ্ট ছিল।
জান লোবাউ

একই অবস্থা. আনফাইন্ড এবং অফ জে.কি. 1.7.2 এর সাথে এফএফ-এ আমার পক্ষে কাজ করেনি এবং .প্রপ ("অনক্লিক", নাল) আমার ক্ষেত্রেও যথেষ্ট ছিল
ব্রায়ানলোট ২

4
আমি মনে করি যে উপরোক্ত পদ্ধতিগুলি আপনার ছেলের জন্য কার্যকর হয়নি কারণ আপনি এটি কীভাবে সেট আপ করেছেন। আপনি যদি ডিওমে ইভেন্টের হ্যান্ডলারটি লিখে থাকেন তবে হ্যাঁ, ইভেন্ট হ্যান্ডলারটি সাফ করার জন্য এই বৈশিষ্ট্যটি সাফ করা প্রয়োজন, তবে আমি মনে করি বেশিরভাগ লোকেরা (নিজেকে সহ) এই জাতীয় জিনিসগুলি (জাভাস্ক্রিপ্ট, ইভেন্ট হ্যান্ডলার ইত্যাদি) বাইরে রাখতে চান think ডম, সুতরাং যখন আমরা কোনও ইভেন্ট হ্যান্ডলার সেটআপ করতে চাই আমরা এমন কিছু ব্যবহার করি $("#elementId").click(function(){//Event execution code goes here});যাতে এটি কোনও HTML পৃষ্ঠায় না হয়। পরিষ্কার করতে যে আমাদের আসলে ব্যবহার করতে হবে .unbind(), বা পছন্দসই.off()
ভয়েডকিং

এখানে এমন কারও মত একটি যাঁর jQuery এর মাধ্যমে যুক্ত বৈশিষ্ট্যগুলি Chrome এর উপাদান প্যানেলে প্রদর্শিত না হয় তা আবিষ্কার করতে মাত্র এক ঘন্টা ব্যয় করেছেন। চেষ্টা করে unbindএবং offএবং এটি সমস্যা সমাধানের করা হয় নি। আপনাকে অনেক ধন্যবাদ!
রেনান

13

ঘটনা সংযুক্ত করা হয়, তাহলে এই পথ , এবং লক্ষ্য অবিবাহিত হতে হয়:

$('#container').on('click','span',function(eo){
    alert(1);

    $(this).off(); //seams easy, but does not work

    $('#container').off('click','span'); //clears click event for every span

    $(this).on("click",function(){return false;}); //this works.

});​

11

আপনি onclickহ্যান্ডলারটি ইনলাইন মার্কআপ হিসাবে যুক্ত করতে পারেন :

<input id="addreport" type="button" value="Add New Report" onclick="openAdd()" />

যদি তা হয় তবে jquery .off()বা .unbind()কাজ করবে না। আপনার জিকুরিতে মূল ইভেন্ট হ্যান্ডলারটি যুক্ত করতে হবে:

$("#addreport").on("click", "", function (e) {
   openAdd();
});

তারপরে jquery এর ইভেন্ট হ্যান্ডলারটির একটি উল্লেখ রয়েছে এবং এটি মুছে ফেলতে পারে:

$("#addreport").off("click")

ভয়েডকিং উপরের মন্তব্যে এটি আরও কিছুটা স্বচ্ছভাবে উল্লেখ করেছেন।


9

2014 এর জন্য আপডেট হয়েছে

JQuery এর সর্বশেষতম সংস্করণ ব্যবহার করে, আপনি কেবল একটি নামস্পেসে সমস্ত ইভেন্টগুলিকে কেবল বাঁধাই করতে সক্ষম করতে পারেন $( "#foo" ).off( ".myNamespace" );



8

করার remove সব event-handlers , এই কি আমার জন্য কাজ হল:

সমস্ত ইভেন্ট হ্যান্ডলারের অপসারণের অর্থ প্লেইনটিকে HTML structureএর event handlersসাথে elementএবং এর সাথে সংযুক্ত সমস্ত ছাড়াই থাকা child nodes। এটি করতে, jQuery's clone()সাহায্য করেছে।

var original, clone;
// element with id my-div and its child nodes have some event-handlers
original = $('#my-div');
clone = original.clone();
//
original.replaceWith(clone);

এই সঙ্গে, আমরা আছে cloneএর জায়গা originalসঙ্গে event-handlersএটিতে।

শুভকামনা ...


7

তথ্যের জন্য ধন্যবাদ. খুব দরকারী আমি এটি অন্য ব্যবহারকারীর সম্পাদনা মোডে থাকাকালীন পৃষ্ঠার মিথস্ক্রিয়াকে লক করার জন্য ব্যবহার করেছি। আমি এজ্যাক্স কমপ্লিটের সাথে একত্রে এটি ব্যবহার করেছি। প্রয়োজনীয়ভাবে একই আচরণ নয় তবে কিছুটা অনুরূপ।

function userPageLock(){
    $("body").bind("ajaxComplete.lockpage", function(){
        $("body").unbind("ajaxComplete.lockpage");
        executePageLock();      
    });
};  

function executePageLock(){
    //do something
}

5

ক্ষেত্রে .on()নিম্নলিখিত পদ্ধতি যেমন পূর্বে নির্দিষ্ট নির্বাচক সঙ্গে ব্যবহৃত হত:

$('body').on('click', '.dynamicTarget', function () {
    // Code goes here
});

উভয় unbind()এবং .off()পদ্ধতি নেই কাজ করে যাচ্ছে।

তবে, বর্তমান নির্বাচকের সাথে মেলে এমন সমস্ত উপাদানগুলির জন্য ইভেন্ট থেকে হ্যান্ডলারটিকে পুরোপুরি অপসারণ করার জন্য .undelegate () পদ্ধতিটি ব্যবহার করা যেতে পারে:

$("body").undelegate(".dynamicTarget", "click")

1
এই সমাধানটি দেখার জন্য আমি পুরো পৃষ্ঠাটি স্ক্রোল করেছিলাম, কবজির মতো কাজ করেছি।
অভিষেক পান্ডে

4

আপনি যদি $(document).on()একটি গতিশীলভাবে তৈরি উপাদানটিতে শ্রোতা যুক্ত করতে ব্যবহার করেন তবে এটি সরাতে আপনাকে নিম্নলিখিতগুলি ব্যবহার করতে হতে পারে:

// add the listener
$(document).on('click','.element',function(){
    // stuff
});

// remove the listener
$(document).off("click", ".element");


2

আপনি সেট যদি onclickমাধ্যমে htmlআপনি প্রয়োজনremoveAttr ($(this).removeAttr('onclick'))

যদি আপনি এটি jquery এর মাধ্যমে সেট করেন (উপরের আমার উদাহরণগুলিতে প্রথম ক্লিকের পরে) তবে আপনার প্রয়োজন unbind($(this).unbind('click'))


2

আমি জানি এটি দেরিতে আসে, তবে কেন ইভেন্টটি সরানোর জন্য সরল জেএস ব্যবহার করবেন না?

var myElement = document.getElementById("your_ID");
myElement.onclick = null;

বা, যদি আপনি ইভেন্ট হ্যান্ডলার হিসাবে একটি নামকৃত ফাংশন ব্যবহার করেন:

function eh(event){...}
var myElement = document.getElementById("your_ID");
myElement.addEventListener("click",eh); // add event handler
myElement.removeEventListener("click",eh); //remove it

ভাল পরামর্শ, আমি যখন পাওয়া যায় দেশীয় জাভাস্ক্রিপ্ট ব্যবহার করতে পছন্দ করি
মিশিগেল

1

বর্ণিত সমস্ত পদ্ধতি আমার পক্ষে কার্যকর হয়নি কারণ আমি on()দস্তাবেজের সাথে ক্লিক ইভেন্টটি যুক্ত করেছিলাম যেখানে রান-টাইমে উপাদানটি তৈরি হয়েছিল:

$(document).on("click", ".button", function() {
    doSomething();
});


আমার কার্যনির্বাহী:

যেহেতু আমি "। বাটন" ক্লাসটি আনবাইন্ড করতে না পারলাম ঠিক তেমন একটি সিএসএস স্টাইল থাকা বোতামটিতে আমি আরও একটি ক্লাস বরাদ্দ করেছি। এটি করে লাইভ / অন-ইভেন্ট-হ্যান্ডলার অবশেষে ক্লিকটিকে উপেক্ষা করেছেন:

// prevent another click on the button by assigning another class
$(".button").attr("class","buttonOff");

আশা করি এইটি কাজ করবে.


1

আশা করি আমার নীচের কোডটি সমস্ত ব্যাখ্যা করেছে। এইচটিএমএল:

(function($){

     $("#btn_add").on("click",function(){
       $("#btn_click").on("click",added_handler);
       alert("Added new handler to button 1");
     });

  
 
     $("#btn_remove").on("click",function(){
       $("#btn_click").off("click",added_handler);
       alert("Removed new handler to button 1");
     });

  
   function fixed_handler(){
    alert("Fixed handler");
  }
  
   function added_handler(){
    alert("new handler");
  }
  
  $("#btn_click").on("click",fixed_handler);
  $("#btn_fixed").on("click",fixed_handler);
  
  
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn_click">Button 1</button>
  <button id="btn_add">Add Handler</button>
  <button id="btn_remove">Remove Handler</button>
  <button id="btn_fixed">Fixed Handler</button>


1
})(jQuery);ইতিমধ্যে বিশ্বব্যাপী অ্যাক্সেস করা যেতে পারে কেন আপনি আইআইএফই-তে প্রবেশ করছেন?
ব্রায়ান পি

2
ভাল প্রশ্ন ব্রায়ান। অনুশীলনের কারণে এই পদ্ধতিটি আমার জিনে প্রবেশ করেছে। - নন jquery প্লাগইনটিতে ভেরিয়েবল to থাকার কিছু সম্ভাবনা থাকতে পারে, তাই আমি সরাসরি ব্যবহার করতে পারি না। - একটি জেএস স্ক্রিপ্ট ফাইলে "jQuery" শব্দটির ঘন ঘন ব্যবহার ফাইলের বাইট আকার বাড়িয়ে তুলতে পারে, যেখানে jQuery একটি 6 বাইট স্ট্রিং। তাই আমি "$" বা একক বাইটের কোনও পরিবর্তনশীল ব্যবহার করতে পছন্দ করি।
মাইস্টেমো

0

কেবল এটি বোতাম থেকে সরান:

$('.classname').click(function(){
$( ".classname" ).remove();
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.