防止onclick被解雇

Question

I was working around with form submissions in html. Please take a look at below code

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

I want to stop clicked() function from firing which is attached to inline onclick attribute. I would like to run my jquery click function and if something goes wrong, I dont want to trigger onclick but it always runs clicked() function. Could any one help me. Any help is greatly appreciated.

Answer 1

The order in which an onxyz handler is called relative to dynamically-attached handlers varies from browser to browser, so your handler may well not run before the original does.

To deal with that, you save and remove the onclick handler:

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

Then, in your handler, if you want that function to be called, you call it:

clickhandler.call(this, event);

Example:

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

if condition is true then remove the 'onclick' attribute

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

        //do something
    });
}


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

Answer 3

I am sharing a quick workaround without knowing why you cannot add logic to stop adding "onclick="clicked();" code which you are saying getting automatically added.

I recommend you hide button with id as "btn1". Add style display:none. You donot need on ready function for this but simply add style attribute to the button btn1 or if that is also not possible directly then use jQuery to do that post document ready. Read : How to change css display none or block property using Jquery?

Then add a new button to the form using jQuery with id as "btn2" and add register the btn2 click event as well. DO this after form load.

<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
 });

Refer below url to how to register click event for new button:

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

Answer 4

尝试event.stopPropagation() api docs

Answer 5

Can't you do the condition check and the clicked() logic in one function? ie

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