jQuery 1.7 .on() and Dynamic Form Catching

Question

I'm having a problem with jQuery 1.7's latest on() function. I'm moving all of my existing live() calls to the new on() function.

In the past I used live() whenever I created a new element or appended some markup from AJAX.

With jQuery 1.7 If I append form markup returned via AJAX and try to use e.preventDefault or return false to stop it from submitting (to validate it for example) — the form is submitted as normal.

$(document).on('submit', 'form', function(e) {
    alert('You tried to submit the form');
    e.preventDefault();
});

not completely positive here, but maybe try binding directly to the form? — kand, Jan 09 '12 at 16:44
Could you create a fiddle that causes this issue? It seems to be working http://jsfiddle.net/markcoleman/E6e79/1/. — Mark Coleman, Jan 09 '12 at 16:48
Is this browser related? Does it work in one browser but not another? — Kevin B, Jan 09 '12 at 16:49
It might be too late to prevent the default action at this stage (though it should not imo). Try `document.body` as selector. — Felix Kling, Jan 09 '12 at 16:49
@KevinB why would that defeat the purpose? $('form').on('submit', function(e){...}); would do essentially the same thing. It is more specific and might require some refactoring, but it might solve the problem. — kand, Jan 09 '12 at 16:55
@kand Because his forms are dynamic. In order to bind directly the form would have to be static or he would have to bind in the success callback of the ajax calls that generate the forms. — Kevin B, Jan 09 '12 at 17:00
I've tried to upload an example but of course my simplified example works perfectly as it should with the above code. I'll update when I discover the problem. — steveneaston, Jan 09 '12 at 17:11
@KevinB Well clearly it would require refactoring, I suggested it as a possible solution. Anyways, my suggestion is an answer that's posted below. — kand, Jan 11 '12 at 16:28

Adam Rackis · Answer 1 · 2012-01-09T17:05:35.510

1

Your code is perfectly valid.

DEMO

If you post some more code we might be able to take a look and see if you have some other problem

But assuming this form is present when the page is rendered, I would just do this:

$("form").on('submit', function(e) {
    alert('You tried to submit the form');
    e.preventDefault();
});

(I'm assuming your page is rendered with the form already present)

edited Jan 09 '12 at 17:05

answered Jan 09 '12 at 16:48

Adam Rackis

82,527
56
270
393

It seems my problem lies with one of my form elements. I gave one an attribute of `name="disabled"` a perfectly legal name attribute as far as I can see? (I'm *not* trying to disable this field, simply give it a name value of `disabled`) See an altered version of @Adam's code [here](http://jsfiddle.net/HtA58/) (original demo [here](http://jsfiddle.net/xzeVX/)). As you can see, the form is submitted. Is this a jQuery bug or is `name="disabled"` illegal? – steveneaston Jan 09 '12 at 17:31
@steveneaston - not sure if that's an invalid name or not. That's a question for the html gurus :) You may want to ask a new Q with `html` `dom` and `javascript` tagged. – Adam Rackis Jan 09 '12 at 17:35

score 0 · Accepted Answer · answered Jan 13 '12 at 10:24

0

This has been confirmed as a jQuery bug in 1.7.1, to be fixed in 1.7.2: http://bugs.jquery.com/ticket/11145

My original code is correct (for dynamic DOM elements). Adam Rackis' code is correct for existing DOM elements.

answered Jan 13 '12 at 10:24

steveneaston

259
1
4
10

jQuery 1.7 .on() and Dynamic Form Catching

2 Answers2