Where to put a jQuery Script?

Question

I'm developing a web-app and I'm always getting this problem: often I have to generate some HTML code via Javascript (for example a user selects the number "6" in a select and I generate 6 fields via JS). The problem is that I can't understand how to link jQuery (or Javascript) functions to those Javascript-generated fields because all the classical methods don't seem to work. In this case I want that my user will only be allowed to type the numbers 0-9 and the backspace, so I wrote this simple jQuery function:

$(document).ready(function() {
            $("#ciao1").keydown(function(e) {
                if ((e.keyCode == 8) || (e.keyCode >= 96 && e.keyCode <= 105) || (e.keyCode >= 48 && e.keyCode <= 57)) {
                    return;
                }
                else {
                    e.preventDefault();
                }
            });
        });

If I create a text field directly inside the HTML code it works perfectly, but with my js-generated fields it won't work! please help!

function addPreparations (nos, pietanze) {
            var numeroTotale = nos.value;
            var box = document.getElementById("box_righe");
            if (numeroTotale == '') {
                box.innerHTML = '';
            }
            else {
                var righe = "<table class='table table-hover'>";
                righe += "<th class='text-center'>Pietanza</th><th class='text-center'>U. di Misura</th><th class='text-center'>Quantità</th><th class='text-center'>Cuoco</th><th class='text-center'>Data di Preparazione</th>";
                for (i = 1; i <= numeroTotale; i++) {
                    righe = righe + "<tr><td><select name='pietanza"+i+"' class='form-control' onchange='showMU(this.value, \"p\", "+i+");'>";
                    righe = righe + "<option value=''>Selezionare la pietanza "+i+"</option>";
                    for (j=0; j<pietanze.length; j++) {
                        righe = righe + "<option value='"+pietanze[j]+"'>"+pietanze[j]+"</option>";
                    }
                    righe = righe + "</select></td>";
                    righe = righe + "<td align='center'><p id='umis"+i+"' class='h5'>- - -</p></td>";
                    righe = righe + "<td><input type='number' placeholder='Inserire la quantità' name='quantita"+i+"' class='form-control'/></td>";
                    righe = righe + "<td><input type='text' placeholder='Inserire il cuoco' name='cuoco"+i+"' class='form-control'/></td>";
                    righe = righe + "<td><input type='text' placeholder='GG-MM-AAAA' id='ciao"+i+"' class='form-control' name='data"+i+"'/></td></tr>";
                }
                righe = righe + "</table>";

                righe = righe + "<input type='submit' name='storageConfirm' value='Conferma' class='btn btn-success'/>&nbsp&nbsp";
                righe = righe + "<input type='reset' value='Reimposta' class='btn btn-danger'/>";

                box.innerHTML = righe;
            }
        }

For example: how to link the jQuery to the first element that will have as id="ciao1"?

You need to use a delegated event to bind to elements that have been added at a later stage. — Niklas, Mar 15 '17 at 09:43
It's because the elements don't exist when you create the `Event Listener` Try using `$('body').on('keydown', '#ciao1', function() {...});` — dschu, Mar 15 '17 at 09:43

score 3 · Accepted Answer · edited Mar 15 '17 at 09:54

3

if you generate html on the fly you should use

$('body').on('keydown','#ciao1',function(e){...

edited Mar 15 '17 at 09:54

empiric

7,449
6
35
44

answered Mar 15 '17 at 09:42

Max Deepfield

229
1
7

understood my mistake, thank you! ^^ – Ale TheFe Mar 15 '17 at 09:59

Where to put a jQuery Script?

1 Answers1