javascript - 在动态创建的 DOM 上调用函数

Question

我有这个倒计时功能:

 function getTimeRemaining(endtime){
            var t = Date.parse(endtime) - Date.parse(new Date());
            var seconds = Math.floor( (t/1000) % 60 );
            var minutes = Math.floor( (t/1000/60) % 60 );
            var hours = Math.floor( (t/(1000*60*60)) % 24 );
            var days = Math.floor( t/(1000*60*60*24) );
            return {
                'total': t,
                'days': days,
                'hours': hours,
                'minutes': minutes,
                'seconds': seconds
            };
        }

        function initializeClock(id, endtime){
            var clock = document.getElementById(id);
            var daysSpan = clock.querySelector('.days');
            var hoursSpan = clock.querySelector('.hours');
            var minutesSpan = clock.querySelector('.minutes');
            var secondsSpan = clock.querySelector('.seconds');

            function updateClock(){
                var t = getTimeRemaining(endtime);

                daysSpan.innerHTML = t.days;
                hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
                minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
                secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

                if(t.total<=0){
                    clearInterval(timeinterval);
                }
            }

            updateClock();
            var timeinterval = setInterval(updateClock,1000);
        };

现在我想在单击按钮然后打开弹出窗口时调用此函数，因此在该窗口中我想运行倒数函数，因此我编写如下:

function startPop(){
    $('.btn').popover({
    template: '<div id="myPopover1" class="popover popover-default">'
    +'<div class="arrow"></div>'
    +'<div class="popover-title"><span class="close" data-dismiss="popover-x">&times;</span>Title</div>'
    +'<div class="col-md-12">'
    +'<div id="clockdiv" class="text-center">'
           +' <div><span class="days"></span><div class="smalltext">Days</div></div>'
           +' <div><span class="hours"></span><div class="smalltext">Hours</div></div>'
           +' <div><span class="minutes"></span><div class="smalltext">Minutes</div></div>'
           +' <div><span class="seconds"></span> <div class="smalltext">Seconds</div></div>'
        +'</div>'   
    +'<div class="popover-footer">'
 +'<div class="input-group" style="padding:10px;">'
        +' <input id="demo1" type="text" class="form-control spin" name="demo1" value="{{$article->price}}">'
        +'<div class="input-group-btn">'
        +'<button type="button" class="btn btn-danger">Post Bid</button></div></div>'
            +'</div>',

});

};


function popForBid(){
    $('.popover').hide();
    $('.btn').click(function() {
    $('.btn').not(this).popover('hide');
    spinner();
    var j = $(this).attr('price');
    var s = $(this).attr('start');
    $('.spin').val(j);
    s = new Date(s);
    initializeClock('clockdiv', s);
});
};

但我无法从 initializeClock('clockdiv', s); 获取 View

如何使其成为可能？

Answer 1

您可以委托(delegate)事件

更多信息请点击 Event Delegation

$('body').on('click', '.btn', function(){
    // do something
});