CODEWITHSUNDEEP
javascriptjquery
abyin007
abyin007

Reputation: 401

Jquery not working for the elements created after document.ready

In my code, i am adding a whole set of new elements on clicking a "+"/plus button.

But the problem is, since am appending the new elements only during clicking, the elements are not responding to the jquery events.

Bellow is an event in my scenarios:

$("#form input[type='text']").blur(validateField);

This event is working for all the input element EXCEPT for the once i appended dymanically on clicking "+"/plus button.

How can i resolve it? can anyone help?

Thanks in advance.

Upvotes: 1

Views: 1128

Answers (4)

A. Wolff
A. Wolff

Reputation: 74420

Delegate event:

$(document.body).on('focusout',"#form input[type='text']",validateField);

As onblur event doesn't bubble by default, use onfocusout event instead.

EDIT: just checked, jquery now add delegation support for onblur event by mapping onblur event.

The blur event does not bubble in Internet Explorer. Therefore, scripts that rely on event delegation with the blur event will not work consistently across browsers. As of version 1.4.2, however, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods, .live() and .delegate().

Upvotes: 5

Jai
Jai

Reputation: 74738

Try with delegating the event to the static parent:

$("#form").on('blur', 'input[type="text"]', validateField);

Upvotes: 1

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

use .on() or .live() or .delegate() method for these newly created elements. It will work.

Upvotes: 2

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28588

you need to use on()

$("#form input[type='text']").on("blur",validateField);

Upvotes: 2

Related Questions