Question

我有一个页面，当html5数字字段被更改时触发calculate（）函数我已经绑定了几个我能想到的事件，它适用于最初加载的DOM元素。

但是，如果我在加载dom后添加元素，则不会触发更改功能。

我添加了一个运行calculate（）函数的按钮，当点击它时，它将运行新创建的元素以及原始元素。

所以我知道代码可以工作，但事件不是为新创建的dom元素触发。

Jquery触发器

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

计算功能

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 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代码

<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

目前您正在使用的是 direct 绑定，它只会在您的代码进行事件绑定调用时附加到页面上存在的元素。

在动态生成元素或操作选择器（如删除和添加类）时，需要使用Event Delegation委托事件方法.on()。

即

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

实施例

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

代替document，您应该使用最近的静态容器。

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序的需要。

不触发DOM元素的Jquery事件在页面加载后创建

1 个答案: