从阿贾克斯加载数据后运行的JavaScript [英] run javascript after loading data from ajax

问题描述

的index.php

 ＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
   $（[数据倒计时]'）。每个（函数（）{

      变量$此= $（本），finalDate = $（本）的.d​​ata（'倒计时'）;

      $ this.countdown（finalDate，函数（事件）{

         $ this.html（'剩余时间：'+ event.strftime（％d天％H：％M：％S'））}）在（'finish.countdown'，函数（）{

            $ this.html（'这campaignn已过期！）;

          }）;
     }）;
 }）;

＆LT; / SCRIPT＆GT;
 

这是用来显示倒计时的JavaScript。 我使用的 jquery.countdown.min.js 插件。

 ＆LT; D​​IV CLASS =反内＆GT; ＆LT; D​​IV ID =例如＆LT;？PHP的echo $ REC ['CID'];？＆gt;中数据倒计时=？＆LT; PHP回声日期（M / D / Y H：我：S的strtotime（$ REC ['Closing_Date']））;＆GT;＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT; P＆GT;
 

Closing_Date和CID来自数据库。 当我访问它工作正常。

但是，当我插入的数据由阿贾克斯的index.php。它没有做任何事情。这似乎是不执行JavaScript的code为。

我检查的萤火，发现日期即将index.php文件，但它没有显示倒数计时。

请指教

阿贾克斯

  $（文件）。就绪（函数（）{
    $（'＃多）。点击（函数（）{
        VAR get_last_post_display = $（'独特的类：最后'）。ATTR（'身份证'）;

        $（'＃多）HTML（'＆LT; IMG SRC =AJAX-loader.gif'）;
        .post的$（'more_prj.php'，'last_id_post ='+ get_last_post_display，功能（HTML）{
            如果（HTML）{

                $（'＃主分区）追加（HTML）。
                $（'＃多）文本（加载更多邮报）。 //再添加文字载入更多邮报到按钮
            } 其他 {
                $（'＃多）文本（没有更多的帖子加载）。 //当最后一个记录添加文本没有更多内容加载到按钮。
            }
        }，'JSON'）;
    }）;
}）;
 

解决方案

此举$（'[数据倒计时]），每个（函数（），以AJAX JS，像这样的：

  $（文件）。就绪（函数（）{
  $（'＃多）。点击（函数（）{
    VAR get_last_post_display = $（'独特的类：最后'）。ATTR（'身份证'）;

    $（'＃多）HTML（'＆LT; IMG SRC =AJAX-loader.gif'）;
    .post的$（'more_prj.php'，'last_id_post ='+ get_last_post_display，功能（HTML）{
        如果（HTML）{
            $（'＃主分区）追加（HTML）。
            $（'＃多）文本（加载更多邮报）。 //再添加文字载入更多邮报到按钮
            $（[数据倒计时]'）。每个（函数（）{
                变量$此= $（本），finalDate = $（本）的.d​​ata（'倒计时'）;
                $ this.countdown（finalDate，函数（事件）{
                $ this.html（'剩余时间：'+ event.strftime（％d天％H：％M：％S'））}）在（'finish.countdown'，函数（）{
                    $ this.html（'这campaignn已过期！）;
                }）;
            }）;
        } 其他 {
            $（'＃多）文本（没有更多的帖子加载）。 //当最后一个记录添加文本没有更多内容加载到按钮。
        }
    }，'JSON'）;
  }）;
}）;
 

index.php

<script type="text/javascript">
$( document ).ready(function() {
   $('[data-countdown]').each(function() {

      var $this = $(this), finalDate = $(this).data('countdown');

      $this.countdown(finalDate, function(event) {

         $this.html('Time Left : '+ event.strftime('%D days %H:%M:%S'))}).on('finish.countdown', function() {

            $this.html('This campaignn has expired!');

          });
     });
 });

</script>

This is javascript used to display countdown timer. I am using jquery.countdown.min.js plugin.

<div class="counter-inner"> <div id="example<?php echo $rec['cid'];?>" data-countdown="<?php echo date("m/d/Y h:i:s", strtotime($rec['Closing_Date']));?>"></div></div><p>

Closing_Date and cid comes from database. When i access it is working fine.

But when i insert data by ajax to index.php. it doesn't do anything. It seems like javascript code is not executed.

I checked in firebug and found date is coming to index.php file but it is not showing countdown timer.

Please advise

Ajax

$(document).ready(function() {
    $('#more').click(function() {
        var get_last_post_display = $('.unique-class:last').attr('id');

        $('#more').html('<img src="ajax-loader.gif"');
        $.post('more_prj.php', 'last_id_post='+get_last_post_display, function(html) {
            if(html) {

                $('#main-div').append(html);
                $('#more').text('Load More Post'); //add text "Load More Post" to button again
            } else {
                $('#more').text('No more Post to load'); // when last record add text "No more posts to load" to button.
            }
        }, 'json');
    });
});

解决方案

move $('[data-countdown]').each(function() to ajax js, like this:

$(document).ready(function() {
  $('#more').click(function() {
    var get_last_post_display = $('.unique-class:last').attr('id');

    $('#more').html('<img src="ajax-loader.gif"');
    $.post('more_prj.php', 'last_id_post='+get_last_post_display, function(html) {
        if(html) {
            $('#main-div').append(html);
            $('#more').text('Load More Post'); //add text "Load More Post" to button again
            $('[data-countdown]').each(function() {
                var $this = $(this), finalDate = $(this).data('countdown');
                $this.countdown(finalDate, function(event) {
                $this.html('Time Left : '+ event.strftime('%D days %H:%M:%S'))}).on('finish.countdown', function() {
                    $this.html('This campaignn has expired!');
                });
            });
        } else {
            $('#more').text('No more Post to load'); // when last record add text "No more posts to load" to button.
        }
    }, 'json');
  });
});

这篇关于从阿贾克斯加载数据后运行的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！