1

我正在尝试在滑动 div 上显示文本。要显示的文本是使用 ajax 动态加载的。在加载文本之前，滑块 div 工作正常，但在单击链接并且 div 填充了数据后，滑块停止工作。我不知道如何解决这个问题。现场样品在这里。尝试单击事件之类的链接，然后单击设计，看看会发生什么。我的 html 在这里

<div class="coda-slider"  id="slider-id">
                    <div>
                        <?php
                        $counter = 0;
                        for ($x = 0; $x < 8; $x++) {
                            $counter++;
                            ?>
                            <div class="galleryitem">
                                <a href="images/flyer1.png" target="" rel="galleryitem"> <img src="images/flyer<?php echo $counter; ?>.png" alt="Flyer <?php echo $counter; ?>" title="Click to view more"/></a>
                                <!--strong>Flyer</strong-->
                                <span class="description"><strong>Item <?php echo $counter; ?></strong> Simple description..Lorem ipsum dolor sit amet, consectetuer adipiscing elit...<a href="product.php">more</a></span>

                            </div>
                        <?php } ?>
                    </div>

                </div>

我的 ajax 加载器代码在这里。

var default_content="";
$(document).ready(function(){
    checkURL();
    $('ul li a').click(function (e){
        checkURL(this.hash);
    });
    //filling in the default content
    default_content = $('#slider-id').html();
    setInterval("checkURL()",250);
});

var lasturl="";
function checkURL(hash)
{
    if(!hash) hash=window.location.hash;
    if(hash != lasturl)
    {
        lasturl=hash;
        if(hash=="")
            $('#slider-id').html(default_content);
        else
            loadPage(hash);
    }
}


function loadPage(url)
{
    url=url.replace('#','');
    $('#loading').css('visibility','visible');
    $.ajax({
        type: "POST",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){
            if(parseInt(msg)!=0)
            {

                $('#slider-id').html(msg);
                $('#loading').css('visibility','hidden');
            }
        }

    });

}

我的 php 后端代码在这里。

<?php
if (!$_POST['page'])
    die("0");
$page = $_POST['page'];
if ($page == 'design') {
    ?>

    <div>
        <?php
        $counter = 0;
        for ($x = 0; $x < 4; $x++) {
            $counter++;
            ?>
            <div class="galleryitem">
                <a href="images/flyer1.png" target="" rel="galleryitem"> <img src="images/flyer<?php echo $counter; ?>.png" alt="Flyer <?php echo $counter; ?>" title="Click to view more"/></a>
                <!--strong>Flyer</strong-->
                <span class="description"><strong>Item <?php echo $counter; ?></strong> Simple description..Lorem ipsum dolor sit amet, consectetuer adipiscing elit...<a href="product.php">more</a></span>
            </div>
        <?php } ?>
    </div>
    <?php
} else {
    echo 'No lists in that category';
}
?>
4

2 回答 2

0

很可能在您的 ajax 更改为这个

$.ajax({
        type: "POST",
        url: "load_page.php",
        data: {'page':url }, /** this is syntax of POST**/
        dataType: "html",
        success: function(msg){
            if(msg.length > 0)
            {

                $('#slider-id').html(msg);
                $('#loading').css('visibility','hidden');
            }
        }

    });
于 2012-12-17T07:56:21.207 回答
0

我认为你应该做一个获取请求而不是发布。您没有向服务器发布您正在获得的东西（您的滑块内容）。您还必须更改 load_page.php。

查看您的代码，您似乎在添加新内容后没有调用任何滑块函数，您可能应该在成功回调中执行此操作。

$.ajax({
        type: "GET",
        url: "load_page.php",
        data: 'page='+url,
        dataType: "html",
        success: function(msg){
            if(parseInt(msg)!=0)
            {
                // guess you have some slider function

                $('#slider-id').html(msg);
                $('#loading').css('visibility','hidden');
                $('#slider-id').slider(); //example of slider function
            }
        }
于 2012-12-17T08:01:52.297 回答