All geek questions in one place

Delegate events for subitems, including the current item

I want to create generic jQuery code that will catch all the submit events of the <form> subelements, including the container element (in case it is a form).

Cases:

The container is a shape

 <form> <button>hi</button> </form>

A container is another element that contains forms.

 <div> <form> <button>submit</button> </form> </div>

What is the clean code for this?

My current solution is as follows:

 function submit(e) { // do something } $(containerSelectorOrjQueryObject).on("submit", "form", submit); $(containerSelectorOrjQueryObject).on("submit", submit);

However, I would be happy to know if there is a better solution using only one on call.

+5
source share
2 answers

You can use the class attribute for this as a way to configure the delegate to catch the submission event of any child form no matter which parent element. Since he is a delegate, this will also capture everything that would be caused by elements that were also dynamically added.

An example that includes a single-form script, several forms in a div script, and a button for dynamically adding a form:

 var alreadyAdded; function submit(e) { // do something alert(e.target.name); return false; } $("body").on("submit", ".outerContainer", submit); $("#addAnotherDynamically").on("click", function(e) { if (typeof(alreadyAdded) === "undefined") { alreadyAdded = true; $("#test2").append("<form name='form4'><button>submit 4</button></form>"); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <body> <form id="test1" name="form1" class="outerContainer"> <button>submit 1</button> </form> <div id="test2" class="outerContainer"> <form name="form2"> <button>submit 2</button> </form> <form name="form3"> <button>submit 3</button> </form> </div> <br> <button id="addAnotherDynamically">Add another form</button> </body>
+1
source

Present events, like other events, bubbles in the DOM, so working with the send event listener for the form itself or any of its parents will work, and you can even cancel your application there.

To always get the form in which the request was submitted, use e.target instead of this in the event listener method.

See this example:

 function onSubmit(e){ e.preventDefault(); document.getElementById('d3').innerHTML += 'Submit catched in ' + e.currentTarget.tagName + '#' + e.currentTarget.id + ' for ' + e.target.tagName + '#' + e.target.id + '<br/>'; } $(function(){ $('#d1').on('submit', onSubmit); $('#f2').on('submit', onSubmit); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="d1"> <form id="f1"> <input type="submit" value="Event Listener on DIV" /> </form> </div> <div id="d2"> <form id="f2"> <input type="submit" value="Event Listener on Form" /> </form> </div> <div id="d3"> </div>

By launching it and clicking on the buttons, you can see that with the same on call you can attach the evest to the form itself or its parent element, and it will work as expected.

So, you can only use the line below, and it will work fine:

 $(containerSelectorOrjQueryObject).on("submit", submit);
0
source

Source: https://habr.com/ru/post/1216446/

More articles:


All Articles