jQuery倒计时-应用于通过AJAX/PHP加载的新元素 - jQuery countdown - apply to new elements loaded via AJAX / PHP

我有一个容器div，它循环遍历PHP数组中的项，以生成重复的元素div，所有这些都具有唯一的ID。

我正在使用倒计时插件(http://keith-wood.name/countdown.html)应用于每个元素的日期，并在PHP中实现。

这一切都很好，直到我使用AJAX/PHP将更多元素加载到页面中。倒计时不适用于新项目，我正在努力想办法做到这一点。

echo "<div class='"item'" id='"item_$id'">
<h4 class='"name'">$Name</h4>
<p>$Cat</p>";
if ($expires != '') {
    $year = date('Y', strtotime($discount['expires']));
    $month = date('n', strtotime($discount['expires']));
    $day = date('d', strtotime($discount['expires']));
    $hour = date('H', strtotime($discount['expires']));
    $minute = date('i', strtotime($discount['expires']));
    $secs = date('s', strtotime($discount['expires']));
    $countdown_html = '<div class="defaultCountdown" id="countdown_' . $id . '" data-year="'. $year .'"  data-month="'. $month .'" data-day="'. $day .'" data-hour="'. $hour .'" data-minute="'. $minute .'" data-secs="'. $secs .'"></div>';
    echo "<script type='"text/javascript'">
    $(window).load(function(){
        var year = $('#countdown_$id').attr('data-year');
        var month = $('#countdown_$id').attr('data-month');
        var day = $('#countdown_$id').attr('data-day');
        var hour = $('#countdown_$id').attr('data-hour');   
        var minute = $('#countdown_$id').attr('data-minute'); 
        var secs = $('#countdown_$id').attr('data-secs');     
        $('#countdown_$id').countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
    });
</script>";
}
echo "</div>'n";
}
function loadMoreItems(getQuery, page) {
    //load items
    $.get(getQuery, null, function(data) {
    var container = $(data).find('#container');
    if (container) {
        var newItemsHTML = "";
        newItemsHTML = $(container).html();
        var $newItems = $(newItemsHTML);
        $container.isotope('insert', $newItems, true);
        //add jquery effects to new elements 
        $newItems.find('.hcaption').hcaptions({effect: "fade"});
        $newItems.find(".live-tile").liveTile({pauseOnHover: true});
        $('.defaultCountdown').each( function() {
            var year = $(this).attr('data-year');
            var month = $(this).attr('data-month');
            var day = $(this).attr('data-day');
            var hour = $(this).attr('data-hour');
            var minute = $(this).attr('data-minute');
            var secs = $(this).attr('data-secs');
            $('#' + this.id).countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
        });
    }
}, 'html');
}

在ajax函数返回后，只需调用jquery即可再次初始化倒计时。

不要使用php将值回显到jQuery调用中，而是将它们添加到div本身，例如

<div class="defaultCountdown" data-year="2013" data-month="11">

然后初始化它将是：

$('div.defaultCountdown').each( function() )
{
year = $(this).attr('year');
...
$(this).countdown({until: new Date(year, month - 1, day, hour, minute, secs)});
});

添加一些检查元素是否已被处理的方法。您可以使用class="unprocessed"最初创建元素

<div class="defaultCountdown unprocessed">

则倒计时初始化功能为：

$('div.defaultCountdown.unprocessed').each(function(){...})

初始化倒计时后，删除"未处理"类名

 $(".element").each(function() { 
    var item_id = "#" + this.id;
    if(this.id != 'discount_0'){
       container.find(discount_id).remove(); 
    }
    $(element_id).countdown({until: new Date($year, $month - 1, $day, $hour, $minute, $secs)});
   });

当你在$(element_id)上应用倒计时时，它应该是

$(item_id)

并且您正在使用$year, $month - 1, $day, $hour, $minute, $secs，所有这些都是php变量，您不能将它们用作jquery变量