jQuery事件委托将无法正常工作

Question

所以我有这段代码。

 $("#inputs input.time").mask("00:00:00"); $("#inputs input.time").prop('value', '00:00:00'); Number.prototype.padDigit = function () { return (this < 10) ? '0' + this : this; } $('#display').click(function () { $('#show').show(); }); $('#inputs').on('focus', 'input.time', function () { $(this).select(); }); $('#append').click(function () { $('#inputs').after("<input type='text' value='00:00:00' class='time' name='time2' /><br>"); }); $('#inputs').on('keyup', 'input.time', function (event) { console.log(event); var t1 = '00:00:00'; var mins = 0; var hrs = 0; var sec = 0; $('#inputs input.time').each(function () { t1 = t1.split(':'); var t2 = $(this).val().split(':'); //console.log(Number(t1[1]) + Number(t2[1])) sec = Number(t1[2]) + Number(t2[2]); secmns = Math.floor(parseInt(sec / 60)); mins = Number(t1[1]) + Number(t2[1]) + secmns; minhrs = Math.floor(parseInt(mins / 60)); hrs = Number(t1[0]) + Number(t2[0]) + minhrs; sec = sec % 60; mins = mins % 60; t1 = hrs.padDigit() + ':' + mins.padDigit() + ':' + sec.padDigit() console.log(t1) }); if (t1 == 'NaN:NaN:NaN') { t1 = '00:00:00'; } $('#total').text(t1); /*****************subtract time*****************/ //new Date(year, month, day, hours, minutes, seconds, milliseconds) //problem, if the seconds, mins or hrs of total is bigger than the remaining. Unexpected result var start = $('#rem').text(); var end = $('#total').text(); s = start.split(':'); e = end.split(':'); var se = Number(s[2]) - Number(e[2]); var sems = Math.floor(parseInt(sec / 60)); var mi = Number(s[1]) - Number(e[1]) - sems; var mihr = Math.floor(parseInt(mins / 60)); var hr = Number(s[0]) - Number(e[0]) - mihr; if (se < 0) { mi = mi - 1; se = se + 60; } if (mi < 0) { hr = hr - 1; mi = mi + 60; } var result = hr.padDigit() + ':' + mi.padDigit() + ':' + se.padDigit(); if (result == 'NaN:NaN:' + se) { result = '00:00:00'; } $('#remain').text(result); }); 

 #remain, #total { background-color: #333; width: 60px; height: 20px; color: #fff; padding: 0 10px; } #show { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script> <button id='display'>Display</button> <div id='show'>Remaining: <div id='remain'>01:20:30</div>Total: <div id='total'>00:00:00</div> <div id='rem'>01:20:30</div> <br> <div id='inputs'> <input type='text' class='time' /> <button id='append'>+</button> <br> </div> </div> 

我的问题是on('keyup')事件可以与.append一起正常工作，并且结果可以在keyup事件上运行，但是如果我使用.after而不是.append ，则代码仍然可以正常工作，但是结果仅在keyup事件为在第一个输入上完成。 如果上面的代码无法运行，请尝试我的JFiddle 。 它与上面的代码相同。

Answer 1

希望这就是你想要的！ 您需要使用insertAfter并将其插入#inputs div中的最后一个input之后

$('#append').click(function () {
           $("<input type='text' value='00:00:00' class='time' name='time2' />").insertAfter("#inputs input:last");
});

这是工作中的演示

编辑-2

进行如下更改，它将起作用：

$('#append').click(function () {
          $("#inputs").after("<input type='text' value='00:00:00' class='time' name='time2' /><br/>");
});

$(document).on('keyup', 'input.time', function (event) {
    console.log(event);
    var t1 = '00:00:00';
    var mins = 0;
    var hrs = 0;
    var sec = 0;
    $('input.time').each(function () {
        t1 = t1.split(':');
        var t2 = $(this).val().split(':');
        //console.log(Number(t1[1]) + Number(t2[1]))
        sec = Number(t1[2]) + Number(t2[2]);
        secmns = Math.floor(parseInt(sec / 60));
        mins = Number(t1[1]) + Number(t2[1]) + secmns;
        minhrs = Math.floor(parseInt(mins / 60));
        hrs = Number(t1[0]) + Number(t2[0]) + minhrs;
        sec = sec % 60;
        mins = mins % 60;
        t1 = hrs.padDigit() + ':' + mins.padDigit() + ':' + sec.padDigit()
        console.log(t1)
    });
    if (t1 == 'NaN:NaN:NaN') {
        t1 = '00:00:00';
    }
    $('#total').text(t1);
    /*****************subtract time*****************/
    //new Date(year, month, day, hours, minutes, seconds, milliseconds)
    //problem, if the seconds, mins or hrs of total is bigger than the remaining. Unexpected result
    var start = $('#rem').text();
    var end = $('#total').text();
    s = start.split(':');
    e = end.split(':');
    var se = Number(s[2]) - Number(e[2]);
    var sems = Math.floor(parseInt(sec / 60));
    var mi = Number(s[1]) - Number(e[1]) - sems;
    var mihr = Math.floor(parseInt(mins / 60));
    var hr = Number(s[0]) - Number(e[0]) - mihr;
    if (se < 0) {
        mi = mi - 1;
        se = se + 60;
    }
    if (mi < 0) {
        hr = hr - 1;
        mi = mi + 60;
    }
    var result = hr.padDigit() + ':' + mi.padDigit() + ':' + se.padDigit();
    if (result == 'NaN:NaN:' + se) {
        result = '00:00:00';
    }
    $('#remain').text(result);
});

工作演示

基本上，您想做的是在#inputs div after插入输入after并且编写了接受#inputs div中存在的keyup代码。 如果您仅对它们进行更改，则为您在其中进行更改的所有inputs都赋予相同的类名，这就足够了。 无需通过其父div与他们联系。