Question

在ajax加载html内容后，我需要滚动到特定元素。该元素具有attr data-event-id =＆＃34;＆＃34; 但有时此变量$('.timelineToolPanel[data-event-id="'+id+'"]').offset().top;返回0.整个ajax代码为：

function refreshContent(id)
{
    var scrollNumber = 0;

    $.ajax({
        type: 'POST',
        url: '<?php echo Yii::app()->createAbsoluteUrl("user/ajaxEventLoad"); ?>',
        dataType:'html',
        success:function(data){
            $("#eventListBlock").empty().append(data);
            if(id!=null) {
                console.log(id);
                scrollNumber = $('.timelineToolPanel[data-event-id="'+id+'"]').offset().top;
                console.log(scrollNumber);
                $("html, body").animate({
                    scrollTo: scrollNumber
                }, 1000, function() {
                    // alert("Finished animating");
                });
            }
        },
        error: function(data) { // if error occured
            alert("Error occured. please try again");
        }
    });
}

和html：

    <div id="eventListBlock">
            <?
            $this->renderPartial('/windows/timelineWindow', array(
                'dataProvider'=>$dataProvider
            ));
            ?>
        </div>

渲染这部分：

<div class="cd-timeline-block">
    <div class="cd-timeline-icon" style="background: <? echo $data->color ?>">
        <i class="fa fa-<? echo $data->icon ?>"></i>
    </div>

    <div class="cd-timeline-content">
        <div class="timelineToolPanel" data-event-id="<? echo $data->id ?>">
            <i class="fa fa-pencil timelineToolPanelEdit"></i>
            <i class="fa fa-trash timelineToolPanelDelete"></i>
        </div>

        <h2><? echo $data->title ?></h2>
        <p><? echo $data->content ?></p>
        <span class="cd-date"><? echo date("d. m. Y", strtotime($data->date_event)); ?></span>
    </div>
</div>

其中 #eventListBlock 是固定容器。

Answer 1

html中的自定义属性必须使用“data- *”定义，否则无效。

http://www.w3schools.com/tags/att_global_data.asp

在“data-event-id =”中命名您的attr并且它应该完成工作，即使我没有证明JS代码：D

ajax加载不起作用后的jQuery scrollTop

1 个答案: