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.

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.

• javascript
• jquery

• Is the clicked() function from the onclick attribute running first? Why do you even have an inline onclick attribute if you are using jQuery? Bind both handlers with the .click() function and whichever one you bind first can call stopImmediatePropogation() to prevent the second one from running. (Or bine them into a single handler.) – nnnnnn Commented Jul 2, 2016 at 8:13
• 1 @nnnnnn sorry but "onclick" is auto generated code we cannot remove onclick event and if we want to attach events add them through jquery but we cannot remove onclick at any time and note "onclick" event handler runs last – user3205479 Commented Jul 2, 2016 at 8:16
• 1 stopPropogation is a typo, it should be stopPropagation – Yeti Commented Mar 22, 2018 at 10:47

5 Answers 5

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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Try event.stopPropagation() api docs

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

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

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

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