V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Spectre
V2EX  ›  JavaScript

Js 小白问个 pjax 的问题

  •  
  •   Spectre · 2016-12-20 13:31:52 +08:00 · 4317 次点击
    这是一个创建于 2888 天前的主题,其中的信息可能已经有所发展或是发生改变。
    pjax 刷新的区域带有<a onclick="">这种 onclick 事件,在第一次页面加载时 onclick 事件点击是有反应的(),
    pjax 请求后 onclick 事件就不生效了,用了$(document).on()那种还是不行。
    41 条回复    2016-12-21 14:50:00 +08:00
    piapia123
        1
    piapia123  
       2016-12-20 14:36:55 +08:00
    pjax?
    knightdf
        2
    knightdf  
       2016-12-20 14:37:45 +08:00
    小白问个问题:什么是 pjax?
    JimmyCai
        3
    JimmyCai  
       2016-12-20 14:38:15 +08:00 via Android
    pjax 后要重新绑定事件
    liujin834
        4
    liujin834  
       2016-12-20 14:38:41 +08:00
    用 pjax 还不如用 angular
    Spectre
        5
    Spectre  
    OP
       2016-12-20 15:01:09 +08:00
    @JimmyCai 怎么重新绑啊 搜了下是$(document).on 那个写法 写了 pjax 后还是没触发事件
    Spectre
        6
    Spectre  
    OP
       2016-12-20 15:01:20 +08:00
    @piapia123 嗯啊
    Spectre
        7
    Spectre  
    OP
       2016-12-20 15:01:47 +08:00
    @liujin834 额 没用过额。
    bombless
        8
    bombless  
       2016-12-20 15:08:23 +08:00
    $.on 都不行那要不说明你写错了要不说明你浏览器环境没救了
    po 主发出来这效果说不定表明 v2 有可以利用的 xss 漏洞 @Livid
    Spectre
        9
    Spectre  
    OP
       2016-12-20 15:26:52 +08:00
    @bombless pjax 刷新第一次的区域有个 a 标签 里面有个 onclick 触发事件,后来我把 onclick 去掉了给 a 加了个 id 然后写$(document).on 那个 ,第一次进界面可以,后来 pjax 请求刷新那个区域后,就不能了。。填充的区域 a 也加了 id 的。
    Livid
        10
    Livid  
    MOD
       2016-12-20 15:36:53 +08:00
    @bombless 1. V2EX 的 Markdown 允许一些安全标签
    2. 楼主的原帖里有这样的安全标签
    3. 楼主的原帖不应该用 Markdown 渲染,因为这样会导致其中的安全标签无法显示。现在改为 default 渲染之后应该可以表达原意
    palmers
        11
    palmers  
       2016-12-20 15:37:49 +08:00
    怎么 a 标签没有 href 属性呢?
    Spectre
        12
    Spectre  
    OP
       2016-12-20 15:39:15 +08:00
    @Livid Markdown 渲染是啥 ``` ```吗 我直接手打的。。
    Livid
        13
    Livid  
    MOD
       2016-12-20 15:40:03 +08:00
    @Spectre 如果你用的是 https://www.v2ex.com/new 这个地址发帖,那么帖子会默认用 Markdown 渲染。
    alex321
        14
    alex321  
       2016-12-20 15:41:11 +08:00
    很久之前我们前端教训我,要用 on 代理。。。
    Spectre
        15
    Spectre  
    OP
       2016-12-20 15:41:13 +08:00
    @palmers you 啊 不过里面是 void 那种
    Spectre
        16
    Spectre  
    OP
       2016-12-20 15:42:19 +08:00
    @Livid 额 好吧 不是很懂呢
    bombless
        17
    bombless  
       2016-12-20 15:46:54 +08:00
    @Spectre 首先确定一下,你知道 on 是怎么用的吧?
    好比说你 DOM 结构是
    <div id="a"><div id="b"></div></div>
    然后你要用 ajax 刷新#b 节点
    那你要$('#a').on('click', '#b', function() { /* ... */ })来代理
    你确定是用类似这种方式吧?
    Spectre
        18
    Spectre  
    OP
       2016-12-20 15:51:44 +08:00
    @bombless

    <div id='pjax-container'>
    <a href='' id='add'></a>
    </div>

    $(document).on('click','#add',function(){
    });

    这种 刷新区域是 pjax-container 也是这个区域会被一个准备好的区域替代,除了数据不一样其他都一样
    刚开始进界面 on 事件有用, pjax 后 on 事件没用了
    bombless
        19
    bombless  
       2016-12-20 16:49:48 +08:00
    也许你那页面用了什么别的框架比如什么模板库来替换一大块 DOM
    建议可以慢慢剥掉外层的无关代码,一边确定问题是否能重现
    最后找到能重现的最少的代码,运气好的话还能找到 ajax 后能触发 click 的代码
    然后对比这两套代码
    还找不到问题可以把最少的可以重现的代码发出来,这样别人也能帮你查
    Kilerd
        20
    Kilerd  
       2016-12-20 17:06:54 +08:00 via iPhone
    @Spectre spectre.css 的作者?
    kn007
        21
    kn007  
       2016-12-20 17:10:26 +08:00
    一般我是重新 hook
    lslqtz
        22
    lslqtz  
       2016-12-20 17:11:15 +08:00
    @Livid 我还是喜欢 Default 。
    发帖时也提供个和编辑一样的选项就好了,编辑有时限
    xwartz
        23
    xwartz  
       2016-12-20 17:12:22 +08:00 via iPhone
    事件要重新绑定才行的
    kiddyu
        24
    kiddyu  
       2016-12-20 17:20:03 +08:00
    是不是 id 重复了?新页面是否有新 js 变量替换了$?
    按说绑定到了 document 就不用重新绑定了,坐等看看 LZ 犯了啥低级错误- -
    panlilu
        25
    panlilu  
       2016-12-20 17:34:41 +08:00
    pjax 有自己的事件,如果你用的是 $(document).ready(function(){...}) 这种肯定是只触发一次的。
    你可以在 pjax 自己的事件上重新做你的绑定操作。详情见文档。
    yimity
        26
    yimity  
       2016-12-20 18:11:51 +08:00
    用事件委托,我觉得是这个问题。不要直接把事件绑定到你要替换的元素上。
    Spectre
        27
    Spectre  
    OP
       2016-12-20 18:23:05 +08:00
    @Kilerd ...dota 幽鬼!
    Spectre
        28
    Spectre  
    OP
       2016-12-20 18:38:12 +08:00
    @kiddyu 新页面和旧页面一样的 只是数据不一样了,这个 pajax 请求是个分页请求只是数据不同了而已
    fy
        29
    fy  
       2016-12-20 19:10:19 +08:00
    现在还有人用 pjax ?还是换更新的技术吧
    Spectre
        30
    Spectre  
    OP
       2016-12-20 21:33:12 +08:00
    @panlilu 看到了 pjax:complete 这个 不过我在这方法里写$(document).on 还是不起作用 汗
    Roycom
        31
    Roycom  
       2016-12-20 21:42:36 +08:00 via iPhone
    隐式绑定事件 obj.on('click','dim',function(){})
    Spectre
        32
    Spectre  
    OP
       2016-12-20 22:34:04 +08:00
    额 lz 可以了 重新绑定事件后 需要覆盖的<div>范围把我的 modal 覆盖了。。一直以为是没响应链接。
    Spectre
        33
    Spectre  
    OP
       2016-12-20 22:38:46 +08:00
    好像都不要重新绑定事件。。马丹 div 区域没看好。
    ragnaroks
        34
    ragnaroks  
       2016-12-21 00:01:46 +08:00
    一般在回调里面重新绑定子元素的事件,暂没有遇到过无效的情况
    kiddyu
        35
    kiddyu  
       2016-12-21 00:07:03 +08:00
    @Spectre 哈哈,果然是低级错误。绑定到 document 页面没有刷新一般是不需要重新绑定的
    dracarysX
        36
    dracarysX  
       2016-12-21 00:13:08 +08:00
    可以使用$(document).on('click', 'a', function(){})绑定。因为你 pjax 后 a 元素就未绑定了。
    Spectre
        37
    Spectre  
    OP
       2016-12-21 08:36:27 +08:00
    @kiddyu HAHA 我直接在 a 链接里写 onclick 返回的 a 里也有 onclick 就好了
    ghbjy1128
        38
    ghbjy1128  
       2016-12-21 09:09:51 +08:00
    @fy 换新技术的话,怎么低成本的解决 SEO 问题?
    jalen
        39
    jalen  
       2016-12-21 10:28:01 +08:00
    @fy 什么新技术呢?
    fy
        40
    fy  
       2016-12-21 11:12:41 +08:00
    @ghbjy1128 当然是服务端渲染啊……

    @jalen 各路 MVVM 框架
    ghbjy1128
        41
    ghbjy1128  
       2016-12-21 14:50:00 +08:00
    @fy 还是不够“低成本”,我们用的 PHP, 不太熟悉 nodejs ,看起来 vuejs 有方案。但 PHP 的话模板和路由都有点麻烦,而 Pjax 的部署和调试只需要在普通网站的基础上增加 4 ~ 8H 的工作量而已。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   954 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 21:42 · PVG 05:42 · LAX 13:42 · JFK 16:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.