Live focus issues with dymaic input fields

Question

I'm trying to make a dynamic input fields solution, similar to my dynamical select rows method.

The idea is simple. There always will be a extra field. So when the last field is in focus, it will clone it and append it to the wrapper.

My current code works with .focus(), and so, is not dynamic. However, .live('focus', function () {}) doesn't. Also, "live change" or "live focusin" doesn't work.

This seems very weird problem, as it is cleared out in this question, that "live focus" should be supported since the version 1.4. However it clearly doesn't work. And most of these other questions have very localized solutions, with alternative functions.

And this is where my knowledge ends and I don't have any more imagination, for an alternative solution.

PS: If this idea is a total bust, then a change event trigger would be an alternative. However, isn't "live change" for select and/or tick inputs only?

score 1 · Answer 1 · answered Feb 17 '12 at 02:08

1

Can't speak to why .live is failing you (example failing code would be nice), but why don't you add the call to .focus during your cloning? Would be trivial to do just after adding the new field to the DOM. Not sure what "dynamic" means in this context, but sure sounds like that's all you need. Have implemented similar form elements in the past using this technique, works great.

answered Feb 17 '12 at 02:08

Irongaze.com

1,639
16
22

My current code link had change instead of focus for live event. This is the falling one: http://jsfiddle.net/7nunk/1/ and this is the non-dynamic focus: http://jsfiddle.net/7nunk/2/ – Kalle H. Väravas Feb 17 '12 at 15:07

score 1 · Accepted Answer · answered Feb 17 '12 at 18:45

So after all, the problem wasn't directly in the live focus function, but rather getting the correct last field. The code wasn't dynamic enough, to really re-calculate what is the currently last one. And some part of me though, that .live() takes care of everything, but it doesn't (Don't code while tired!).

So when I changed the live functions selector manually to .dynamicalfields_wrapper input:last, it worked fine.. So I modified my code to be more dynamic, but yet use the wrappers selector that comes to the global jQuery function.

(function ($) {
    $.fn.DynamicalFieldsUpdater = function () {
        return this.each(function (i, wrapper) {
            $(wrapper).find('input:last').css('background', 'red').live('focus', function (i, last) {
                $(wrapper).append($(this).clone().val(''));
            });
        });
    };
})(jQuery);
$('.dynamicalfields_wrapper').DynamicalFieldsUpdater();

^{[View output]}

Works like desired. Also works with change, only that not "change"-change, but keypress.

Live focus issues with dymaic input fields

2 Answers2