Javascript jQuery倒计时-应用于通过AJAX/PHP加载的新元素

我有一个容器div，它通过PHP数组中的项循环生成重复的元素div，所有元素都具有唯一的ID

我正在使用一个倒计时插件（）来应用于每个元素上的日期，它是在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');
}

echo”
$Name
$Cat
“；
如果（$expires！=''）{
$year=date（'Y'，strottime（$折扣['expires']）；
$month=日期（'n'，标准时间（'expires']）；
$day=date（'d'，strottime（$折扣['expires']）；
$hour=日期（'H'，标准时间（'expires']）；
$minute=date（'i'，strottime（$折扣['expires']）；
$secs=日期（'s'，strottime（$折扣['expires']）；
$countdown_html=''；
回声“
$（窗口）。加载（函数（）{
var year=$（'倒计时'$id'）.attr（'数据年'）；
var month=$（'#倒计时'$id'）.attr（'data-month'）；
var day=$（'#倒计时'$id'）.attr（'data-day'）；
var hour=$（'#倒计时'$id'）.attr（'data-hour'）；
var minute=$（'#倒计时'$id'）.attr（'data-minute'）；
var secs=$（'#倒计时'$id'）.attr（'data-secs'）；
$（#倒计时$id'）。倒计时（{直到：新日期（年、月-1、日、小时、分钟、秒）}）；
});
";
}
回音“\n”；
}
函数loadMoreItems（getQuery，第页）{
//加载项目
$.get（getQuery，null，函数（数据）{
var container=$（数据）.find（“#container”）；
if（集装箱）{
var newItemsHTML=“”；
newItemsHTML=$（container.html（）；
var$newItems=$（newItemsHTML）；
$container.同位素（'insert'，$newItems，true）；
//向新元素添加jquery效果
$newItems.find（'.hcaption'）.hcaptions（{effect:“fade”}）；
$newItems.find（“.liveTile”）.liveTile（{pauseonhaver:true}）；
$（'.defaultCountdown'）。每个（函数（）{
变量年份=$（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）.倒计时（{直到：新的日期（年、月-1、日、小时、分钟、秒）}）；
});
}
}","html";；
}

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

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

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

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

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

 $(".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\u id）

，它应该是

$(item_id)

---

您使用的是

$year、$month-1、$day、$hour、$minute、$secs

所有这些都是php变量，您不能将它们用作jquery变量

好的，但是如何将倒计时添加到未处理的变量中呢？如何将正确的日期添加到未处理的日期中？我编辑了答案，没有看到开始倒计时的jquery代码。要设置正确的日期，请在div中添加日期值，这样就可以了，我做了您建议的更改，但仍然没有乐趣。上面编辑的代码。$container.同位素（'insert'，$newItems，true）；这应该是$（'#container'）。同位素（'insert'，$newItems，true）？

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

$(item_id)