Using jQuery functions on javascript generated DOM elements

Question

I'm writing a webpage that has a button that generates a couple things when it's clicked. It generates a dropdown menu, a textfield and two buttons. The textfield is there to track the quantity of whatever is selected, with the two buttons either raising or lowering the value by 1.

Creating the elements was straightforward enough, but tying the functions to the buttons that increase or decrease the value haven't seemed to work. I've seen quite a few examples, but I haven't seen one that works with my code. I think part of the problem is that I'm creating the DOM elements through javascript instead of just using HTML, but I couldn't figure any other way generate them dynamically.

        window.addField = function addField(btn) {

                    var parentRow = btn.parentNode.parentNode;
                    var table = parentRow.parentNode;
                    var rowCount = table.rows.length;

                    var row = table.insertRow(rowCount);

                    var cell3 = row.insertCell(0);

                    var cell1 = row.insertCell(1);
                    var element1 = document.createElement("input");
                    element1.type = 'text';
                    element1.class = 'qty';
                    element1.id = 'quantity';
                    element1.value = 0;
                    cell1.appendChild(element1);

                    var cell2 = row.insertCell(2);
                    var element3 = document.createElement("button");
                    element3.class = 'qtyminus';
                    element3.type = "button";
                    element3.innerHTML = "+1";
                    element3.setAttribute('field', 'quantity');
                    cell2.appendChild(element3);

                    var cell4 = row.insertCell(3);
                    var element4 = document.createElement("button");
                    element4.setAttribute('field', 'quantity');
                    element4.class = 'qtyplus';
                    element4.type = "button";
                    element4.innerHTML = "-1";
                    cell4.appendChild(element4);

                    var my_form = document.createElement('form');
                    my_form.name = 'myForm';
                    my_form.method = 'post';
                    my_form.action = 'equipment_page_admin.php';




                    var element2 = document.createElement("select");
                    //element2.type = "select";
                    var option1 = document.createElement("option");
                    option1.innerHTML = "---Please Select Equipment---";
                    option1.value = "default";
                    element2.add(option1, null);
                    var option2 = document.createElement("option");
                    option2.innerHTML = "120-130 BBL Vacuum Truck (Blackiron)";
                    option2.value = "120-130 BBL Vacuum Truck (Blackiron)";

    ....

                var option151 = document.createElement('option');
                option151.innerHTML = 'Vermiculite (4-Cubic Foot Bags)';
                option151.value = 'Vermiculite (4-Cubic Foot Bags)';
                element2.add(option151, null);

                cell3.appendChild(element2);
                my_form.append(element2);


            };

jQuery(document).ready(function(){
            // This button will increment the value
            $('.qtyplus').click(function(e){
                // Stop acting like a button
                e.preventDefault();
                // Get the field name
                fieldName = $(this).attr('field');
                // Get its current value
                var currentVal = parseInt($('#'+fieldName).val());
                // If is not undefined
                if (!isNaN(currentVal)) {
                    // Increment
                    $('#'+fieldName).val(currentVal + 1);
                } else {
                    // Otherwise put a 0 there
                    $('#'+fieldName).val(0);
                }
            });
            // This button will decrement the value till 0
            $(".qtyminus").click(function(e) {
                // Stop acting like a button
                e.preventDefault();
                // Get the field name
                fieldName = $(this).attr('field');
                // Get its current value
                var currentVal = parseInt($('#'+fieldName).val());
                // If it isn't undefined or its greater than 0
                if (!isNaN(currentVal) && currentVal > 0) {
                    // Decrement one
                    $('#'+fieldName).val(currentVal - 1);
                } else {
                    // Otherwise put a 0 there
                    $('#'+fieldName).val(0);
                }
            });
        });

JSFiddle here : http://jsfiddle.net/pdwv04d3/

Answer 1

This is happening because you're attaching your click event listeners directly to elements that don't exist. That is, on the document ready event, you're looking for all elements that match .qtyplus and .qtyminus, but none do. That gives you an empty array of jQuery objects. Then the click handler is attached to every element in that array, but it's empty, so no click handlers are attached.

To get this to work, rather than using the .click() shorthand, you would want to use .on(), e.g.:

$( 'table' ).on( 'click', '.qtyplus', function ( e ) { /* ... */ });

This works because browser click events "bubble" up from a target to its parent elements. jQuery takes advantage of this with .on() by attaching an event listener to a parent element and checking the target of events that bubble up to that element. In this case, it will listen for click events in table, check that the target matches the selector specified (e.g., .qtyplus or .qtyminus), and call the callback if it does.