Call a function when appending an input into DOM using jQuery

Question

I have a page that appends and removes inputs from DOM using jquery. Some of them share a class ("numeric"). Once each input is appended, my code should call .numeric() to every new input with "numeric" class. I defined this block at the beginning of the code,

$('input.numeric')
    .live('load', function() {
        $(this).numeric();
    });

but load seems not to be related to appended nodes after DOM is loaded. Ready event isn't working either.

How could I do that? Thanks mates

Edit: I managed to solve this following @BGerrissen methods in a more general way. I already defined a wrapper for appending (which I called draw), and then each time I append anything, I trigger $(document).trigger('appended'), so it is easy to track anywhere. Then I use

$(document)
     .bind('appended', function() {
        $('input.numeric').numeric();
    });

To do what I need. Cheers

BGerrissen · Accepted Answer · 2013-01-15 09:32:59Z

2

When appending inputs, fire a custom event as well.

var child = $("<input class='numeric' />");
$("#parent").append(child);
child.trigger("appended");

Then you can hook events to it for your purpose:

$('input.numeric')
    .live('appended', function() { // Use .on() method from jQuery 1.7 and up
        $(this).numeric();
    });

NOTE: As of jQuery 1.7, .live() is deprecated. Use .on()

Or use a helper method for firing the event on append.

function appendAndFireAppendEvent( parentExpr , childExpr ){
    var child = $( childExpr );
    $( parentExpr  ).append(child);
    child.trigger("appended");
}

// usage
appendAndFireAppendEvent( "#parentElement" , "<input class='numeric' />" );

NOT ADVISED **

You can also override jQuery's append() method to always fire the "appended" event.

var oldAppend = $.fn.append;
$.fn.append = function( el )
{
   oldAppend.call( this , el ); // DONT convert el to a JQuery object before passing it to oldAppend
   $(el).trigger("appended");
   return $(el); // to allow chaining to work
}

But this will apply to ALL append() calls, wether you want it or not and might possibly break something as I've not investigated stability of this override.

edited Jan 15, 2013 at 9:32

answered Aug 16, 2011 at 8:41

BGerrissen

21.7k4 gold badges41 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sergi Juanola Over a year ago

Thanks for your answer. But what to do when you are appending this input among much more code?

BGerrissen Over a year ago

Search and replace really, or create a helper method, but you still need to search and replace. There's not really a clean easier way. You could override jQuery's .append() method to always fire an "appended" event, but I would seriously advice against that.

netpoetica Over a year ago

the .live() method was deprecated in version 1.7 of jQuery, and .bind() is on it's way out as well - in case anyone might be copying this example directly.

T. Junghans · Accepted Answer · 2011-08-16 09:41:14Z

0

I agree with BGerrissen by using custom events.

Regarding your question: If you're adding more html than just the input you could scan the whole html snippet like below:

var html = '';
html += '<div>';
html += '<input class="numeric" />';
html += '</div>';

var $html_to_add = $(html);

// add html to dom

if ($html_to_add.find('input.numeric').length > 0) {
  // trigger event   
}

answered Aug 16, 2011 at 9:41

T. Junghans

11.7k8 gold badges55 silver badges78 bronze badges

Collectives™ on Stack Overflow

Call a function when appending an input into DOM using jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related