Question

所以我有这个代码。

＆＃13;

$("#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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

我的问题是，事件on('keyup')可以正常使用.append并且结果会在keyup事件上运行，但如果我使用.after代替.append，代码仍可正常运行但结果只会显示keyup事件是否在第一个输入上完成。如果上面的代码不能运行，请尝试我的JFiddle。它与上面的代码完全相同。

Answer 1

希望这是你想要的!!您需要使用insertAfter并在input div

中的最后#inputs后插入

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

$('#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);
});

以下是工作 DEMO

编辑 - 2

如下更改，它将起作用：

after

<强> WORKING DEMO

基本上你要做的是插入输入 #inputs div keyup您已编写代码接受#inputs 它们存在于inputs div中。因为你给的是同样的如果您引用，则更改所有{{1}}的类名只有他们就足够了。无需通过他们的父母联系他们格。

jquery事件委托将无法工作

1 个答案: