.on blur

Im trying to get an .on blue to fire when the user leaves a input field which was changed on click of a cell of a table. Ive managed to easily get the cell to change from a text value to a input box via:-
$(document).on("click", ".requiredInput", function (e) {
	var textVal = $(this).text();
	$(this).html('<input class="cellInputChanged" type="text" value="' + textVal + '" />');
});

Open in new window


But my problem is turning it back, which Ive done as:-
$(document).on("focusout", ".cellInputChanged", function () {
	var textVal = $(this).text();
	$(this).parent().html(textVal );
});

Open in new window


Which I cannot get to fire at all, no errors, it doesnt seem to attach an event onto the blur event, even though Im using .on which from my knowledge should listen for future elements to match

Any ideas what Im doing wrong?
tonelm54Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

tonelm54Author Commented:
I forgot to attach the jsFiddle url to this, sorry:-
https://jsfiddle.net/zxhxsoz2/
Alexandre SimõesManager / Technology SpecialistCommented:
HEre you go:
$(document).ready(function () {
    $(document).on("click", ".requiredInput", function (e) {
        var textVal = $(this).text();
        
        var $elem = $('<input class="cellInputChanged" type="text" value="' + textVal + '" />');
        $(this).html($elem);
        $elem.focus();
        
        
    });
    
    $(document).on("blur", ".cellInputChanged", function () {
        var textVal = $(this).val();
        $(this).parent().html(textVal);
    });
    
});

Open in new window


https://jsfiddle.net/AlexCode/zxhxsoz2/2/

Basically you need to set the focus to the textbox after you add it.
Also you weren't getting the textbox value properly.
Alexandre SimõesManager / Technology SpecialistCommented:
Here's the same code a bit more optimized:
$(document).ready(function () {
    $(document).on("click", ".requiredInput", function (e) {
        var $this = $(this);
        var textVal = $this.text();
        
        var $elem = $('<input class="cellInputChanged" type="text" value="' + textVal + '" />');
        $this.html($elem);
        $elem.focus();        
    });
    
    $(document).on("blur", ".cellInputChanged", function () {
        var $this = $(this);
        var textVal = $this.val();
        $this.parent().html(textVal);
    });
    
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Codrut TambuSr. Software Developer EngineerCommented:
There's one more thing to consider.
To avoid accidental double-click to empty your values, consider toggleClass ".requiredInput" from the parent td.
Also consider keep using text() instead of html() to avoid security issues:
$(document).ready(function () {
    $(document).on("click", ".requiredInput", function (e) {
        var textVal = $(this).text();
        $(this).removeClass('requiredInput');
        var $elem = $('<input class="cellInputChanged" type="text" value="' + textVal + '" />');
        $(this).html($elem);
        $elem.focus();

    });

    $(document).on("blur", ".cellInputChanged", function () {
        var textVal = $(this).val();
        $(this).parent().text(textVal).addClass('requiredInput');
    });


});

Open in new window


when adding the class back you can also perform validation and / or. add additional css class to show correct edits or updated values.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.