JQuery හි සිදුවීම් හසුරුවන්නෙකු ඉවත් කිරීමට හොඳම ක්‍රමය?

මට අ input type="image". මෙය මයික්‍රොසොෆ්ට් එක්සෙල් හි ඇති සෛල සටහන් මෙන් ක්‍රියා කරයි. input-imageමෙය යුගලනය කර ඇති පෙළ කොටුවට යමෙකු අංකයක් ඇතුළත් කළහොත් , මම ඒ සඳහා සිදුවීම් හසුරුවන්නෙකු සකසමි input-image. එවිට පරිශීලකයා ක්ලික් කළ විට image, දත්ත වලට සටහන් කිහිපයක් එකතු කිරීමට ඔවුන්ට කුඩා උත්පතන ලැබේ.

මගේ ගැටළුව වන්නේ පරිශීලකයෙකු පෙළ කොටුවට ශුන්‍යයක් ඇතුළු කළ විට, මට input-imageසිදුවීම් හසුරුව අක්‍රීය කිරීමට අවශ්‍ය වීමයි . මම පහත සඳහන් දෑ අත්හදා බැලුවද එයින් කිසිදු .ලක් නොවීය.

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

jQuery ≥ 1.7

JQuery 1.7 සිට සිදුවීම් API යාවත්කාලීන කර ඇත, .bind()/ .unbind()පසුගාමී අනුකූලතාව සඳහා තවමත් පවතී, නමුත් වඩාත් කැමති ක්‍රමය වන්නේ on () / off () ශ්‍රිත භාවිතා කිරීමයි. පහත දැක්වෙන්නේ,

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

මෙම ප්‍රශ්නයට පිළිතුරු සපයන විට මෙය ලබා ගත නොහැකි විය, නමුත් ඔබට සිදුවීම් සක්‍රිය / අක්‍රීය කිරීමට සජීවී () ක්‍රමය භාවිතා කළ හැකිය .

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

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

මෙම කේතය සමඟ කුමක් සිදුවේද යන්න නම්, ඔබ #mydisablebutton ක්ලික් කළ විට, එය අක්‍රීය කළ පන්තිය #myimage අංගයට එකතු කරනු ඇත. මෙමඟින් තේරීම් කාරකය තවදුරටත් මූලද්‍රව්‍යයට නොගැලපෙන අතර .Live () තේරීම නැවත වලංගු වන පරිදි 'ආබාධිත' පන්තිය ඉවත් කරන තෙක් සිද්ධිය ඉවත් නොකෙරේ.

එම පංතිය මත පදනම්ව මෝස්තර එකතු කිරීමෙන් මෙය වෙනත් වාසි ලබා ගනී.

ඔබට සිදුවීමකට එක් වරක් පමණක් ප්‍රතිචාර දැක්වීමට අවශ්‍ය නම් , පහත දැක්වෙන වාක්‍ය ඛණ්ඩය සැබවින්ම ප්‍රයෝජනවත් විය යුතුය:

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

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

භාවිතා arguments.callee , අපි එක් විශේෂිත නිර්නාමික-උත්සවය හසුරුවන්නා ඉවත් කර ඇති බව සහතික කළ හැකි අතර, ඒ අනුව, දී ඇති අවස්ථාවට සඳහා තනි කාලය හසුරුවන්නා ඇත. මෙය අන් අයට උපකාරී වේ යැයි සිතමි.

බන්ධන ශ්‍රිතය භාවිතා කිරීමෙන් මෙය කළ හැකිය.

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

ඔබට jquery හි එකම වස්තුවට සහ සිදුවීමට සිදුවීම් හසුරුවන්නන් කිහිප දෙනෙකු එකතු කළ හැකිය. මෙයින් අදහස් කරන්නේ නව එකක් එකතු කිරීම පැරණි ඒවා වෙනුවට ආදේශ නොකරන බවයි.

සිදුවීම් නාම අවකාශයන් වැනි සිදුවීම් හසුරුවන්නන් වෙනස් කිරීම සඳහා උපාය මාර්ග කිහිපයක් තිබේ. සබැඳි ලියකියවිලි වල මේ ගැන පිටු කිහිපයක් තිබේ.

මෙම ප්‍රශ්නය දෙස බලන්න (මා බැඳීම ගැන ඉගෙන ගත්තේ එලෙසයි). පිළිතුරු වල මෙම උපාය මාර්ග පිළිබඳ ප්‍රයෝජනවත් විස්තරයක් ඇත.

Jquery හි බැඳී ඇති හෝවර් කෝල්බැක් කාර්යයන් කියවන්නේ කෙසේද

සමහර විට නොබැඳීමේ ක්‍රමය ඔබ වෙනුවෙන් ක්‍රියා කරනු ඇත

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

මුක්කු සහ අට්ටාල භාවිතා කරමින් මට සිදුවීම අහෝසි කිරීමට සිදු විය. මට එක හෝ වෙනත් ආකාරයකින් එය කළ නොහැකි විය. මටත් වැඩ කරන්න බැරි වුණා. මම TD මූලද්‍රව්‍යයක් මත වැඩ කරමින් සිටිමි.

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

සිදුවීම මේ ආකාරයෙන් අමුණා ඇත්නම් සහ ඉලක්කය සම්බන්ධ නොවිය යුතුය:

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

});​

ඔබ onclickහසුරුවන්නා පේළිගත සලකුණු ලෙස එකතු කරමින් සිටිය හැක :

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

එසේ නම්, jquery .off()හෝ ක්‍රියා .unbind()නොකරනු ඇත. මුල් සිදුවීම් හසුරුවන්නා jquery තුළද එකතු කළ යුතුය:

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

එවිට jquery හි සිදුවීම් හසුරුවන්නා පිළිබඳ සඳහනක් ඇති අතර එය ඉවත් කළ හැකිය:

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

VoidKing ඉහත අදහස් දැක්වීමේදී මෙය තව ටිකක් පැහැදිලිව සඳහන් කරයි.

2014 සඳහා යාවත්කාලීන කරන ලදි

JQuery හි නවතම අනුවාදය භාවිතා කරමින්, සරලවම කිරීමෙන් ඔබට සියලු සිදුවීම් නාම අවකාශයක බැඳ තැබිය හැකිය $( "#foo" ).off( ".myNamespace" );

පේළිගත ඔන්ක්ලික් සිදුවීම ඉවත් කිරීමට හොඳම ක්‍රමය නම් $(element).prop('onclick', null);

කිරීමට remove සියලූම event-handlers , මේ මට වැඩ දේ:

සියලුම සිදුවීම් හසුරුවන්නන් ඉවත් කිරීම යන්නෙන් අදහස් කරන්නේ තැනිතලාව සහ එහි HTML structureසියල්ල event handlersඅමුණා නොගෙනය . මෙය කිරීමට, උදව්.elementchild nodesjQuery'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ස්ථානය ලැබෙනු ඇතoriginalevent-handlers එය මත.

වාසනාව...

තොරතුරු වලට ස්තූතියි. වෙනත් පරිශීලකයෙකු සංස්කරණ ප්‍රකාරයේදී පිටු අන්තර්ක්‍රියා අගුළු දැමීම සඳහා මම එය භාවිතා කළෙමි. මම එය ajaxComplete සමඟ භාවිතා කළෙමි. අවශ්‍යයෙන්ම එකම හැසිරීම නොව තරමක් සමාන ය.

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

function executePageLock(){
    //do something
}

නඩුවේ .on()ක්රමය මීට පෙර පහත සඳහන් උදාහරණය මෙන්, විශේෂයෙන්ම තේරීම් සමඟ භාවිතා කරන ලදී:

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

ක්‍රම unbind()සහ .off()ක්‍රම දෙකම ක්‍රියාත්මක නොවේ .

කෙසේ වෙතත්, වත්මන් තේරීම් කාරකයට ගැලපෙන සියලුම අංග සඳහා හෑන්ඩ්ලර් සම්පූර්ණයෙන්ම ඉවත් කිරීමට .undelegate () ක්‍රමය භාවිතා කළ හැකිය:

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

$(document).on()ගතිකව සාදන ලද මූලද්‍රව්‍යයකට සවන්දෙන්නෙකු එක් කිරීමට ඔබ භාවිතා කරන්නේ නම් එය ඉවත් කිරීමට ඔබට පහත සඳහන් දෑ භාවිතා කිරීමට සිදුවනු ඇත:

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

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

මෙය ද හොඳ .Simple ක්රියා කරන අතර easy.see http://jsfiddle.net/uZc8w/570/

$('#myimage').removeAttr("click");

ඔබ නියම නම් onclickහරහා htmlඔබට අවශ්යremoveAttr ($(this).removeAttr('onclick'))

ඔබ එය jquery හරහා සකසන්නේ නම් (ඉහත උදාහරණවල පළමු ක්ලික් කිරීමෙන් පසුව) ඔබට අවශ්‍ය වේ unbind($(this).unbind('click'))

මෙය ප්‍රමාද වී පැමිණෙන බව මම දනිමි, නමුත් සිදුවීම ඉවත් කිරීමට සරල JS භාවිතා නොකරන්නේ මන්ද?

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

විස්තර කරන ලද සියලුම ප්‍රවේශයන් මට වැඩ කළේ නැත, මන්දයත් මම ක්ලික් කිරීමේ සිද්ධිය on()ධාවන වේලාවේදී මූලද්‍රව්‍යය නිර්මාණය කළ ලේඛනයට එකතු කරන බැවිනි :

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

මගේ ක්‍රියාකාරිත්වය:

මට ".බටන්" පන්තිය බැඳ තැබීමට නොහැකි වූ නිසා මම වෙනත් පංතියක් එකම CSS මෝස්තර සහිත බොත්තමට පවරා ඇත්තෙමි. එසේ කිරීමෙන් සජීවී / සිදුවීම් හසුරුවන්නා අවසානයේ ක්ලික් කිරීම නොසලකා හැරියේය:

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

උපකාරවත් වන බලාපොරොත්තුව.

මගේ පහත කේතය සියල්ල පැහැදිලි කරයි යැයි සිතමි. HTML:

(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>

බොත්තමෙන් එය ඉවත් කරන්න:

$('.classname').click(function(){
$( ".classname" ).remove();
});