Verhindern onclick von feuern

Question

Ich arbeitete mit Formularübersetzungen in HTML. Bitte werfen Sie einen Blick auf Code unten

<form id="form1"> 
<button id="btn1" onclick="clicked();">Submit</button> 
</form> 
<script> 
    $("#btn1").click(function (event) { 
     alert("event triggered"); 
     if(some_condition == true){ 
      // stop firing onclick method but it always submits the form 
      event.stopImmediatePropogation(); // not working 
      event.preventDefault(); // not working 
      event.stopPropogation(); // not working it's for bubbled events 
     } 
    }); 
    function clicked(){ alert("clicked me"); } 
</script> 

Ich möchte clicked() Funktion von Brennen zu stoppen, die onclick Attribut Inline angebracht ist. Ich möchte meine jQuery-Klick-Funktion ausführen und wenn etwas schief geht, möchte ich keinen onclick auslösen, aber es läuft immer clicked() -Funktion. Könnte mir jemand helfen? Jede Hilfe wird sehr geschätzt.

Answer 1

Die Reihenfolge, in der ein onxyz Handler relativ dynamisch an genannt wird Handler von Browser zu Browser unterschiedlich, so kann der Handler auch nicht ausgeführt werden, bevor das Original der Fall ist.

damit umgehen, Sie speichern und die onclick Handler entfernen:

var btn = $("#btn1"); 
var clickHandler = btn[0].onclick; 
btn[0].onclick = false; 

Dann in Ihrem Handler, wenn Sie diese Funktion wollen, aufgerufen werden Sie es nennen:

clickhandler.call(this, event); 

Beispiel:

// Get the button 
 
var btn = $("#btn1"); 
 

 
// Save and remove the onclick handler 
 
var clickHandler = btn[0].onclick; 
 
btn[0].onclick = false; 
 

 
// Hook up your handler 
 
$("#btn1").click(function(event) { 
 
    alert("event triggered"); 
 
    if (!confirm("Allow it?")) { 
 
    // Disallowed, don't call it 
 
    alert("stopped it"); 
 
    } else { 
 
    // Allowed, call it 
 
    clickHandler.call(this, event); 
 
    } 
 
}); 
 

 
// The onclick handler 
 
function clicked() { 
 
    alert("clicked me"); 
 
}

<form id="form1" onsubmit="return false"> 
 
    <button id="btn1" onclick="clicked();">Submit</button> 
 
</form> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

Versuchen event.stopPropagation() api docs

Answer 3

, wenn die Bedingung wahr ist, dann entfernen Sie das ‚Onclick‘ Attribut

if (some_condition == true) { 
    $("#btn1").removeAttr('onclick').click(function(event) { 
     alert("event triggered"); 

     //do something 
    }); 
} 


function clicked() { 
    alert("clicked me"); 
} 

Answer 4

ich eine schnelle Abhilfe teilen bin, ohne zu wissen, warum Sie nicht Logik hinzufügen können, zu stoppen „Onclick =“ geklickt() Zugabe,“Code was du sagst wird automatisch hinzugefügt.

Ich empfehle Ihnen, Schaltfläche mit ID als "btn1" zu verbergen. Stilanzeige hinzufügen: keine. Sie brauchen dafür keine ready-Funktion, sondern fügen dem Button btn1 einfach ein style-Attribut hinzu, oder wenn das auch nicht direkt möglich ist, verwenden Sie jQuery, um das Post-Dokument fertig zu machen. lesen: How to change css display none or block property using Jquery?

Dann eine neue Schaltfläche zum Formular hinzufügen mit jQuery mit der ID als „btn2“ und fügen Sie registrieren das Ereignis als auch btn2 klicken. Tue dies nach dem Laden der Form.

<form id="form1"> 
<div id="newbut"> 
<button id="btn1" onclick="clicked();">Submit</button> 
</div> 
</form> 

jQuery("#newbut").html('<button id="btn2">Submit</button>'); 
$(document).on('click', '#btn2', function(){ 
    // Your Code 
}); 

Siehe unten URL wie für neue Schaltfläche klicken Ereignis registrieren:

Adding click event for a button created dynamically using jQuery jquery - Click event not working for dynamically created button

Answer 5

Können Sie die Bedingungsprüfung nicht tun und die clicked() Logik in einer Funktion? d. h.

<script> 
function clicked() { 
    if(some_condition == true){ 
     return; 
    } 
    alert("clicked me"); 
} 
</script>