jquery 选择器不能有效操作,为什么

默认情况下,cgridview打开了Ajax,我想通过jquery操作每个单元格,进行ajax修改或提示相关信息。但只能操作第一次页面的表格里的元素。

当点击第二页导航时或其他页面,包括点击后的第一页,jquery选择器都没有效果。

因为后来的表格都是异步加载进来,不知道如何对它有效 选择器操作。

但是,将cgridview改成普通模式,即每次页面都刷新,就可以任意操作表格了。


<?php

$cs=Yii::app()->getClientScript();

$script = '

    $("td").each(function(){

        $(this).live("click",function(){'.

            CHtml::ajax(

            array('url'=>$this->createUrl('Evaluate/GetImageList'),

            'type'=>'POST',

            'success'=>'function(data){showImages(data)}',

            'data'=>array('str'=>'js:$(this).text()'),

            ))

        .'});

     });

     function showImages(data) {

         var myData=jQuery.parseJSON(data);

         var imgHtml="";

         $.each(myData,function(i,n){

            imgHtml=imgHtml+n.imgsrc;

         });

         $("#showfontimage").html(imgHtml);

     }';

    $cs->registerScript('copybookAjaxGetImgList', $script);


?>

复制代码我按照脚本注册的方法,发现对实现ajax的cgridvieww依然没有效果。即,初始化第一页可以操作,对page导航后新的页面无效。

我这有什么错吗?

后来,在纯粹的页面里,当然还是在用YII框架中的view,不用gridview,凡是被ajax返回产生的html,自己的ajax都对它无法操作,没有任何反应。即使用Live绑定事件。

请高手帮忙一下。

查了本论坛上有关此类问题,总不能解决我的问题。

本论坛上有关地址在:

http://www.yiiframework.com/forum/index.php/topic/26854-jquery-selector-event-not-work-after-navigation-through-pager/page__p__129265__hl__jquery+elector#entry129265

有人答之,我用之不能解。

http://www.yiiframework.com/forum/index.php/topic/29841-clistview-scripts-tags-not-working-on-ajax-update/page__p__143585__hl__jquery+elector#entry143585

无人答之。.

http://www.yiiframework.com/forum/index.php/topic/10427-ajax-clientscript/page__hl__+elector+u+e__st__40

看着有些乱

我用delegate,还是 .on新方法,总不能解决。

我不了解Yii对jQuery的应用的原理。望赐教之。

js实现需要换思路

1.模拟 $(’.someClass’).live(‘click’,function(){

}); 自己看gridview 修改,删除,更新的做法

将你的代码换为:

$(“td”,"#gridViewId").live(‘click’,function(){

       //先保证事件都正确被触发:


    alert(&quot;hello 啊 调用啦!&quot;);

});

如果上面的代码可被正确调用 在ajax模式下也可以的话 那么 剩余的事就是你的事了 :lol:

2.在1 不起作用的时候 只能用这样的方式:

不管是CGridView 还是 CListView 都有个afterAjaxUpdate 这个就是用来重新挂接事件的钩子 (http://www.yiiframework.com/doc/api/1.1/CGridView#afterAjaxUpdate-detail)参考api文档

‘afterAjaxUpdate’=>'js:function(id, data){

           &#036;(&quot;td&quot;,&quot;#&quot;+id).click(function(){  // 做你爱做的});

}’,

以上任何一个如果都不起作用那么你只有坐等高人前来帮忙了 :D

谢谢,第一种我己经用过多次,没有办法才来这边求解。

第二种,我还没有用。

但我己经转换思路实现了ajax操作。即将有关表格的单元格ID或value,事先都绑定在“操作”上,用“type=>raw”,"value=>CHtml::ajaxlink(随便GET)。

另外一点,有一些对象操作不能放在“document.ready()”,一定放在全加载DOM以后再来操作。这样后绑定才有效果。

你的建议,我也用用。哈哈

你确信你的第一种跟我给出的一致么?? :lol: 这是你的




 $("td").each(function(){

        $(this).live("click",function(){'.

            CHtml::ajax(

            array('url'=>$this->createUrl('Evaluate/GetImageList'),

            'type'=>'POST',

            'success'=>'function(data){showImages(data)}',

            'data'=>array('str'=>'js:$(this).text()'),

            ))

        .'});

     });




你用td 做为选择器 当然只能选择一次 在页面加载后 jquery把事件绑定到当前页面的td上了(this)

但翻页后td元素就是另一批td了

所以要你用 $(‘td’,’#gridId’).live 这种选择方式

你没有发现你的jquery写的很怪吗 即便用你那种语法 $(‘td’).live(‘click’,function(){}); 这种语法也可以了

yiqing95 is right. live() is working, but not $(‘td’).each(), the issue is $(‘td’).each(), it is only run ONE time when init the page!

solution:

$(‘a.classname’, ‘td’).live(function(e) {

e.preventDefault():

t = $(e.target);

t.ajax(…);

});

remove the $(‘td’).each(), it should work.