Jquery Event Not Triggering for DOM Elements Created after page load

Question

I have a page that trigger a calculate() function when a html5 number field is changed I have bound just about every event I can think of to it and it works for the originally loaded DOM elements.

However, if I add elements after the dom is loaded the change functions do not trigger.

I added a button that runs the calculate() function and when click it will run for the newly created elements as well as the original ones.

So I know the code works but the event isn't firing for the newly created dom elements.

Jquery Triggers

            $('.score').change(function() {
                calculate();
            });
            $('.score').bind('keyup mouseup', function() {
                calculate();
            });
            $('.score').mousewheel(function() {
                calculate();
            });
            $('.score').click(function() {
                calculate();
            });
            $('.score').keypress(function() {
                calculate();
            });

Calculate Function

function calculate() {
            $("tbody tr").each(function() {
                row_total = 0;
                $(".score", this).each(function() {
                    row_total += Number($(this).val());
                });
                $(".total", this).val(row_total);
            });
            var arr = [];
            var row = 0;
            $("tbody tr").each(function() {
                $(".total", this).each(function() {
                    arr[row] = $(this).val();
                    row += 1;
                });
            });
            var sorted = arr.slice().sort(function(a, b) {
                return b - a
            })
            var ranks = arr.slice().map(function(v) {
                return sorted.indexOf(v) + 1
            });
            row = 0;
            $("tbody tr").each(function() {
                $(".place", this).each(function() {
                    $(this).val(ranks[row]);
                    row += 1;
                });
            });
            $("tbody tr").each(function() {
                $(".place", this).each(function() {
                    var p = $(this).val();
                    switch (p) {
                        case '1':
                            $(this).css('background-color', 'gold');
                            break;
                        case '2':
                            $(this).css('background-color', 'silver');
                            break;
                        case '3':
                            $(this).css('background-color', '#8c7853');
                            break;
                        case '4':
                            $(this).css('background-color', 'white');
                            break;
                        default:
                            $(this).css('background-color', 'white');
                    }
                });
            });
        }

genRow Function

function genRow(i)
        {
            var x = "";
            for (var j = 0; j < i; j++) {
                x += '<tr class="competitors">';
                x += '<td class="row">';
                x += '<input class="name" type="text" />';
                x += '</td>';
                x += '<td class="row">';
                x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />';
                x += '</td>';
                x += '<td class="row">';
                x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />';
                x += '</td>';
                x += '<td class="row">';
                x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />';
                x += '</td>';
                x += '<td class="row">';
                x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />';
                x += '</td>';
                x += '<td class="row">';
                x += '<input class="score" type="number" step="1" min="-100" max="100" value="0" />';
                x += '</td>';
                x += '<td class="row">';
                x += '<input class="total" type="text" value="0"/>';
                x += '</td>';
                x += '<td class="row">';
                x += '<input class="place" type="text" value="0"/>';
                x += '</td>';
                x += '</tr>';
            }
            return x;
        }

HTML Code

<body>
    <table id="main">
        <tr>
            <td class="header">
                Name
            </td>
            <td class="header judge">
                Judge 1
            </td>
            <td class="header judge">
                Judge 2
            </td>
            <td class="header judge">
                Judge 3
            </td>
            <td class="header judge">
                Judge 4
            </td>
            <td class="header judge">
                Judge 5
            </td>
            <td class="header btn">
                <input id="btn_Total" type="button" value="Total"/>
            </td>
            <td class="header h_place">
                Place
            </td>
        </tr>
        <tr class="competitors">

        </tr>
        <tr>
            <td colspan="7"></td>
            <td class="header btn">
                <input id="btn_AddRow" type="button" value="Add Row"/>
            </td>
        </tr>
    </table>
</body>

Answer 1

Currently what you are using is called a direct binding which will only attach to element that exist on the page at the time your code makes the event binding call.

You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically or manipulation selector (like removing and adding classes).

i.e.

$(document).on('event','selector',callback_function)

Example

$(document).on('click', '.score', function(){
    //Your code
    alert("clicked me"); 
});

In place of document you should use closest static container.

The delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, we can use delegated events to bind the click event to dynamically created elements and also to avoid the need to frequently attach and remove event handlers.