Delegate to capture two form submissions

Question

Using the following function to capture two dynamically generated form submissions, but is not preventing their submission.

$('body').delegate('.edit_faq, .new_faq', 'submit', function(e){
      e.preventDefault();
      //voodoo
    });

I was using the following, using live. This works, but live is depreciated and the end result is for this code to end up in a flexible plugin.

$('.edit_faq').add('.new_faq').live('submit', function(e){
  e.preventDefault();
  //magic
});

This should work. What jquery version are you using and what browser? A sample on jsfiddle would make it easier to answer, and also making a test case can uncover mistakes. — vinczemarton, Sep 05 '12 at 10:08

score 1 · Accepted Answer · answered Sep 05 '12 at 10:17

1

What you have written is actually working.

check:

press run as jsfiddle sometimes needs a refresh before testing submits.

I have only been able to test it with chrome 23.

answered Sep 05 '12 at 10:17

vinczemarton

JAR.JAR.beans · Answer 2 · 2012-09-05T10:08:08.197

0

Try on which is the recommended way, and return false:

$('body').on('submit', '.edit_faq, .new_faq', function(e){
      e.preventDefault();
     //Do your stuff here.

    });

As to why the submission still occurs, maybe you have a JS error somewhere in the page?

edited Sep 05 '12 at 10:08

answered Sep 05 '12 at 10:02

JAR.JAR.beans

why return false and preventDefault? – Mild Fuzz Sep 05 '12 at 10:03
See Here: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – JAR.JAR.beans Sep 05 '12 at 10:04
That doesn't work. Also, that link clarifies that in this instance `return false` is not needed, as I suspected. – Mild Fuzz Sep 05 '12 at 10:05

score 0 · Answer 3 · answered Sep 05 '12 at 10:18

0

FIXED--

The problem was that the code required being wrapped on a document onReady:

$(document).ready(function(){
  $('body').on('submit', '.edit_faq, .new_faq', function(e){
      e.preventDefault();
      //voodoo
  });
})

I occurs to me that since live did not require the ready, that maybe this is still wrong?

answered Sep 05 '12 at 10:18

Mild Fuzz

this is the solution. also live requires document.ready too if I remember correctly. – vinczemarton Sep 05 '12 at 10:21
In the first, you are attaching the event handlers to `body` which probably doesn't exist until after the DOM content is loaded. In the second, the handlers are being attached to the `document` itself. – Dennis Sep 05 '12 at 10:29
SO, I can bypass the need for onready by attaching to $(document)? – Mild Fuzz Sep 05 '12 at 10:31
I don't think you should bypass it since there will be no guarantee that it will work consistently across browsers. – vinczemarton Sep 05 '12 at 10:32
1

@SoonDead That is how `live` works so it will work across browsers. – Dennis Sep 05 '12 at 11:04

3 Answers3