Yii：Ajax 按钮在 CLIstView 的 ajax 更新后不起作用答案

【问题标题】：Yii: Ajax button not working after an ajax update of a CLIstViewYii：Ajax 按钮在 CLIstView 的 ajax 更新后不起作用
【发布时间】：2013-05-22 19:48:13
【问题描述】：

我有一个包含多个元素的 CListView。这些元素中的每一个都有一个 ajax 链接。

起初，ajax 链接运行良好，但当我在 CListView 中切换页面时，ajax 链接不再运行！

这是我的控制器：

$dataProvider = News::model()->listeNews();
$this->renderPartial(
    '_list',
    array('dataProvider' => $dataProvider,),
    false,
    true
);
Yii::app()->end();

CListView：

<?php $this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'itemView'=>'_view',
    'enablePagination'=>true,
    //don't change the id, used to update the number of news to displau
    'id'=>'list',
    'cssFile' => Yii::app()->theme->baseUrl . '/css/widgets/listview/styles.css',
    'template'=>"{pager}\n{items}\n{pager}",
    'pager' => array(
        'class' => 'PagerSA',
        'cssFile'=>Yii::app()->theme->baseUrl . '/css/widgets/pager.css',
        ),
)); ?>

以及项目视图中的ajax链接：

<?php echo CHtml::ajaxLink(
    '<div class="nb_like" id="nb_like_'.$data->id.'">' . $data->like . '</div>',
    array('news/like','id'=>$data->id, 'type'=>'like'),
    array('update'=>'#nb_like_'.$data->id),
    array('class'=>'btn_like', 'id'=> 'like_' . $data->id)
);?>

更新：当我查看 ajax 请求时，我可以看到 javascript 已通过，但没有任何变化

<script type="text/javascript">
/*<![CDATA[*/
jQuery('#list').yiiListView({'ajaxUpdate':['list'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'list-view-loading','sorterClass':'sorter','enableHistory':false});
$('body').on('click','#like_2810',function(){jQuery.ajax({'url':'/index-local.php/news/like?id=2810&type=like','cache':false,'success':function(html){jQuery("#nb_like_2810").html(html)}});return false;});
/*]]>*/
</script>

【问题讨论】：

标签： php ajax yii

【解决方案1】：

我会使用纯 jQuery。

项目视图

<?php echo CHtml::link(
    "<div class=\"like-container\">{$data->like}</div>",
    array('news/like', 'id'=>$data->id, 'type'=>'like'),
    array('class'=>'btn_like')
)) ?>

列表视图

<?php Yii::app()->clientScript->registerScript('initLikeButtons',<<<JS
    $('body').on('click','.btn_like', function(e) {
        e.preventDefault();
        $.post($(this).attr('href'), function(data) {
            $(this).parents('.like-container').html(data);
        });
    });
JS
, CClientScript::POS_READY); ?>

注意：我没有测试这个脚本，所以你可能需要稍微调整一下。但它应该给你的想法。

根据经验：不要过度使用 CHtml::ajax*() 助手。它们仅在非常简单的情况下有用。在大多数情况下，使用一些普通的自定义 jQuery 行会更好。

【讨论】：

它正在工作，我需要更改的唯一内容是在 post 回调中，我们不能使用 $(this) 所以就在我创建 var that = $(this) 的帖子之前，在 post 回调中我调用了 @ 987654326@！感谢您的回答！

【解决方案2】：

我同意迈克尔的观点。在这种情况下，使用纯 Jquery 更好。 Yii 的做法似乎更复杂。这是一个可能的解决方案：

查看 index.php：

<div class="col1"> <?php $this->renderPartial('_ajaxContent', array('model'=>$model)); ?> </div>

查看 _ajaxContent.php

<p> echo $model->field;  </p>

_new.php（CListView 项）：

<li>
    <a class="news" href="<?php echo CHtml::normalizeUrl(array("/ajax/id/{$data->id}"))?>"> Link name </a>        
</li>

jquery：

$('.new').live("click", function(e) {
        var href = $(this).attr('href');      
        $.ajax({
            url: href,
            type: "GET",
            dataType: 'text',
            success: function(result){
                var val = $('.col1').html(result);
            }
        });
        return false;
    });

控制器

public function actionAjax($id) {
        $data = array();
        $model = News::model()->findByPk($id);
        $this->renderPartial('_ajaxContent', $data, false, true);
    }

基本上，使用 live 函数，您甚至可以为新元素绑定 jquery 事件。您会丢失它们，因为它们正在被破坏并在动态上重新创建。

【讨论】：