带有Ajax和PHP的Jcarousel无法正常工作

Question

我正在尝试创建一个垂直新闻提要，它将使用ajax从数据库中提取数据。 如果我直接调用php include文件，则滑块可以正常工作，但是通过ajax调用时，滑块将无法工作。 这样做将在列表中显示所有结果，并且滑块功能将不起作用。

PHP：

$hospitalId = 1; 
$todaysDate = date("Y-m-d");

?>


<ul>
    <?

    $getNews1 = "SELECT * FROM  cms_content, cms_contentJoin  
    WHERE cms_content.contentId = cms_contentJoin.contentId1 
    AND contentId2 = '13'
    AND liveStatus = '1' 
    AND templateId = '5'
    AND cms_content.hospitalId = '$hospitalId' 
    AND joinType = 'newsCategory'
    AND publishDate <= '$todaysDate' 
    ORDER BY publishDate Desc
    LIMIT 0,30"; 
    $getNews2 = mysql_query($getNews1) or die ("Unable to content");

            $i = 0;
            while($getNews3 = mysql_fetch_array($getNews2)) {



            ?>
                <li>
                <div class="item<? if ($i == 0) { echo " active"; } ?>">



              <? $title = strip_tags("$getNews3[contentTitle]");


                    if ($moduleId == "Home") { $titleLength = 20; } else {  $titleLength = 30; } 

                    if ((strlen($title) > $titleLength) && (strlen($title) > 1)) { 
                        $whitespaceposition = strpos($title," ",$titleLength-5); 
                        $title = substr($title, 0, $whitespaceposition)."..."; 
                    }  ?>

                        <span class="name"><a href="<? echo "$getNews3[navUrl]"; ?>">
                            <? echo $title; ?>
                        </a></span>

                    <?
                    $article = strip_tags("$getNews3[contentMain]");

                    if ($moduleId == "Home") { $articleLength = 50; } else {  $articleLength = 90; } 

                    if ((strlen($article) > $articleLength) && (strlen($article) > 1)) { 
                        $whitespaceposition = strpos($article," ",$articleLength-5); 
                        $article = substr($article, 0, $whitespaceposition)."..."; 
                    } 

                    ?>
                    <div class="story"><p>&nbsp;<? echo $article; ?></p><a href="<? echo "$getNews3[navUrl]"; ?>">
                            Read more...
                        </a></div>



                    <div class="clearfix"></div>
                </div>
                </li>

                <? $i++; ?>
            <? } ?>

</ul>


<div class="col-md-9">

    <div class="morenews">
        <a href="/news/ncategory/13/Business News/">&rang; See More...</a>
    </div>

</div>

<div class="col-md-3">
        <a href="#" id="newslist-prev" class="jbutton"></a>
        <a href="#" id="newslist-next" class="jbutton"></a>
</div>`

HTML / Ajax：

<div id="newslist" >
                            <?php //include("system-files/website/templates/includes/modules/BusinessNews.php"); ?>



                        </div>



                           <script>


                        /*$('#newslist').load('/system-files/website/templates/includes/modules/BusinessNews.php');
                        jQuery('#newslist').jcarousel('reload');                      






                        var Url = '/system-files/website/templates/includes/modules/BusinessNews.php';
                        var postData   = new Object();                    
                                        jQuery.ajax({
                                              url:Url,
                                              type: "POST",
                                              data:postData,
                                              success:function(data) {

                                                   jQuery('#newslist')
                                                        .append(data);

                                                    // Reload carousel
                                                    jQuery('#newslist').jcarousel('reload');
                                              }
                                              });*/

                                 var Url = '/system-files/website/templates/includes/modules/BusinessNews.php';
                        var postData   = new Object();                    
                                        jQuery.ajax({
                                              url:Url,
                                              type: "POST",
                                              data:postData,
                                              success:function(data) {
                                            $('#newslist').html(data);
                                            $('#newslist').jcarousel();
                                        },  
                                    error: function(error){
                                         console.log("Error:");
                                         console.log(error);
                                    }
                                }); 

jQuery：

/************************************************************************/// // NEWS ///************************************************************************/

/**
 * We use the initCallback callback
 * to assign functionality to the controls
 */
function mycarousel_initCallback(carousel) {

    jQuery('#newslist-next').bind('click', function() {
        carousel.next();
        return false;
    });

    jQuery('#newslist-prev').bind('click', function() {
        carousel.prev();
        return false;
    });
};



// Ride the carousel...
jQuery(document).ready(function() {

    jQuery("#newslist").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
itemFallbackDimension: 300,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        vertical: true,
        auto: 1,
        itemLastOutCallback: {
           onAfterAnimation: disableCustomButtons
        },
        itemLastInCallback: {
           onAfterAnimation: disableCustomButtons
        }
    });
});



function disableCustomButtons(carousel){

    var prev_class = 'jcarousel-prev-disabled jcarousel-prev-disabled-vertical';
    if (carousel.first == 1) {
    $('#newslist-prev').attr('disabled', 'true').addClass(prev_class);
    } else {


$('#newslist-prev').removeAttr('disabled').removeClass(prev_class);
    }

    var next_class = 'jcarousel-next-disabled jcarousel-next-disabled-vertical';
    if (carousel.last == carousel.size()) {
    $('#newslist-next').attr('disabled', 'true').addClass(next_class);
    } else {
   $('#newslist-next').removeAttr('disabled').removeClass(next_class);
    }

};

Answer 1

尝试更改：

    var Url = '/system-files/website/templates/includes/modules/BusinessNews.php';

    var postData   = new Object();                    
        jQuery.ajax({
              url:Url,
              type: "POST",
              data:postData,
              success:function(data) {
            $('#newslist').html(data);
             jQuery("#newslist").jcarousel({
               scroll: 1,
               initCallback: mycarousel_initCallback,
               itemFallbackDimension: 300,
               buttonNextHTML: null,
               buttonPrevHTML: null,
               vertical: true,
               auto: 1,
               itemLastOutCallback: {
                  onAfterAnimation: disableCustomButtons
               },
               itemLastInCallback: {
                  onAfterAnimation: disableCustomButtons
               }
            });
        },  
        error: function(error){
         console.log("Error:");
         console.log(error);
        });