How to bind blur on dinamically loaded element?

Question

So, i have this function that checks the CEP (zipcode) triggered by .blur, the thing works great when fired from the console but won't run when imported via external .js. Here's the code:

$('#inputs').on('blur', '#i11', function(){
    var cep = $("#i11").val().replace(/\D/g, '');
    if (cep != "") {
        var validacep = /^[0-9]{8}$/;
        if(validacep.test(cep)) {
            $.getJSON("//viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {
                if (!("erro" in dados)) {
                    newInput({id: "i13", value: dados.logradouro, type: "hidden"}, '#cacheDB');
                    newInput({id: "i14", value: dados.bairro, type: "hidden"}, '#cacheDB');
                    newInput({id: "i15", value: dados.localidade, type: "hidden"}, '#cacheDB');
                    newInput({id: "i16", value: dados.uf, type: "hidden"}, '#cacheDB');
                 } else {
                    formGrabber("#content", loadSequence($("#pid").val()));
                 }
             });
        }
    }
});

EDIT: Well... Seems that the reason is that the #i11 field is loaded dynamically in the page, so i've updated the question to a more suitable one.

EDIT 2: Updated the code following the instructions on https://stackoverflow.com/a/1207393/5855060 Still not working tho

Open the developer console (usually F12), does it say anything? I hope you have jQuery available. — Bálint, Jun 17 '16 at 01:14
Says nothing, yes i have jQuery, and the function runs great when fired fron the console. — Lucas Bueno, Jun 17 '16 at 01:16
You should provide more information about the dynamic environment, probably the cause. Did you check the loading order of the files? — sp3, Jun 17 '16 at 01:20
If the content is loaded dynamically, probably the object doesn't exists when jQuery is loaded. So `$("#i11")` returns undefined. — Mick, Jun 17 '16 at 01:47

Mick · Answer 1 · 2016-06-17T13:07:44.783

0

Add console.log('Hello world'); in line 2, after jQuery(function(){ to see your code is running.
If your content is loaded dynamically, $("#i11") will return an empty object. You can check this by using console.log($("#i11")); If thats the case, you are assigning blur to nothing. Instead, if you load your content dynamically, you should bind events after you loaded them into dom, not before.

Workaround

There was a function called .live() in jQuery, but it was removed in favour of .on(), which .blur() is a shortcut of. As of the documentation, you can have the same result like .live() by binding it to document, with the following code:

$( document ).on( "blur", "#i11", function() { 
    // ...
}

This is called delegated events. To be more specific, you may use a container instead of document, but it must exist on page load. You can read more about this delegated events in the documentation of .on()

edited Jun 17 '16 at 13:07

answered Jun 17 '16 at 01:57

Mick

8,203
10
44
66

It's exactly the case, the #i11 field is loaded dynamically. How do i bind the event after it loads? I've tried using a trigger with the page sequence id in with the field is loaded, but it still doesn't work. Edit: About the code, i've put an alert earlier and it would run on load, on the first input load #i1 – Lucas Bueno Jun 17 '16 at 03:02
You should always bind events when you create the elements. If you have no control about when and how they get created, you can use delegated events by binding your blur to a object that exists on page load, for example "document". I edited my question. Please accept as answer :) – Mick Jun 17 '16 at 13:05

score 0 · Answer 2 · edited May 23 '17 at 12:18

So, i've solved using this: https://stackoverflow.com/a/1207393/5855060. Gonna leave this here for reference anyways.

$(function(){
    $('#inputs').on('blur', '#i11', function(){
        alert('funciona')
        var cep = $("#i11").val().replace(/\D/g, '');
        if (cep != "") {
            var validacep = /^[0-9]{8}$/;
            if(validacep.test(cep)) {
                $.getJSON("//viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {
                    if (!("erro" in dados)) {
                        newInput({id: "i13", value: dados.logradouro, type: "hidden"}, '#cacheDB');
                        newInput({id: "i14", value: dados.bairro, type: "hidden"}, '#cacheDB');
                        newInput({id: "i15", value: dados.localidade, type: "hidden"}, '#cacheDB');
                        newInput({id: "i16", value: dados.uf, type: "hidden"}, '#cacheDB');
                     } else {
                        formGrabber("#content", loadSequence($("#pid").val()));
                     }
                 });
            }
        }
    });
});

How to bind blur on dinamically loaded element?

2 Answers2