I have a page which uses jQuery & parsley plugin for form validation and submission. Below is the event handler for the form,

$('#formid').parsley().on('form:submit', function(event) {
    //handle form submit
});

I have another pure JavaScript listener function to be executed on submit of the form. Below is the code snippet,

document.getElementById("formid").addEventListener("submit",function(e){
   //Some code to be executed after form submit
});

I have a requirement not to use jQuery for the above function.

Now the problem is, parsley is stopping flow of events down the line by using event.stopImmediatePropagation();

Because of this, the second event handler is not getting executed. Is there a way I could make my pure javascript handler to execute first? I came across this jQuery solution to bindUp an event handler. But I need pure javascript solution. Any help is greatly appreciated.

Update: Here is JSFiddle for my problem.

I have a page which uses jQuery & parsley plugin for form validation and submission. Below is the event handler for the form,

$('#formid').parsley().on('form:submit', function(event) {
    //handle form submit
});

I have another pure JavaScript listener function to be executed on submit of the form. Below is the code snippet,

document.getElementById("formid").addEventListener("submit",function(e){
   //Some code to be executed after form submit
});

I have a requirement not to use jQuery for the above function.

Now the problem is, parsley is stopping flow of events down the line by using event.stopImmediatePropagation();

Because of this, the second event handler is not getting executed. Is there a way I could make my pure javascript handler to execute first? I came across this jQuery solution to bindUp an event handler. But I need pure javascript solution. Any help is greatly appreciated.

Update: Here is JSFiddle for my problem.

• javascript
• jquery
• dom-events
• parsley.js

• The full content of your question must be in your question, not just linked. Instead of jsFiddle, use Stack Snippets (the <> toolbar button) to put the full code necessary to demonstrate the issue in a runnable demo on-site. – T.J. Crowder Commented Aug 27, 2016 at 11:57
• I went to copy your fiddle into your question for you as a Stack Snippet, and found you've tripped over jsFiddle's surprising default of wrapping everything in a window.onload = function() { /*your code here*/}; wrapper. If you use the options to turn that wrapper off (it's an amazingly silly default), the issue you had with my answer goes away. – T.J. Crowder Commented Aug 27, 2016 at 12:01
• You were right! Thank you. The code works if I change to onDOMReady. But in my case, I dont have control over this as my code is inside an external javascript file linked to the html page header. The parsley jQuery code is in the script tag within body of the html. So not able to control the sequence here. – Sathish Jayaram Commented Aug 27, 2016 at 12:16
• Putting script tags referencing external files in head is not generally a good idea (unless you use async or defer), can't you move it? – T.J. Crowder Commented Aug 27, 2016 at 12:17
• I have my code as an external JS file with async attribute in the page's head tag. Unfortunately I cant change this. My code has to be in external file. – Sathish Jayaram Commented Aug 27, 2016 at 12:20

3 Answers 3

The only way is to ensure that the addEventListener handler is added before the jQuery handler. jQuery will use addEventListener to add its handler for the event (at which point it will use that single handler for all handlers for that event on that element), and since handlers added with addEventListener are processed in the order they were added, your non-jQuery handler will be executed first by the browser.

Example:

// The first addEventListener handler -- does get called
document.getElementById("the-button").addEventListener("click", function () {
    console.log("first addEventListener handler called");
}, false);

// The jQuery handler that stops immediate propagation
$("#the-button").on("click", function (e) {
    console.log("jQuery handler called");
    e.stopImmediatePropagation();
});

// The second addEventListener handler -- doesn't get called
document.getElementById("the-button").addEventListener("click", function () {
    console.log("this message won't be output");
}, false);

<input type="button" id="the-button" value="Click Me">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

yes, you can do that. use Boolean true as third parameter to function addEventListener like below. it's binding the handler in capturing phase of the event. for more about capturing and bubbling phase of event see

document.getElementById("formid").addEventListener("submit",function(e){
   //Some code to be executed after form submit
}, true);

hope this will help

First way

I don't know if this is going to work, try to refresh your propagation event :

var refEvent = event.originalEvent;
refEvent.cancelBubble = false;
refEvent.defaultPrevented = false;
refEvent.returnValue = true;
refEvent.timeStamp = (new Date()).getTime();

if (event.target.dispatchEvent){
    event.target.dispatchEvent(refEvent);
} else if (event.target.fireEvent) {
    event.target.fireEvent(refEvent);
}

then you can stop the propagation again after your handler executed by adding event.stopPropagation(); again to your handler this time

Second way

//Listener

var stoped = false;
if(stoped){
    event.stopPropagation();
}

//handler

var stoped = true

source : How to undo event.stopPropagation in jQuery?