※ 引述《seedman (cc)》之铭言： : 我自己写网页的经验只有Ember.js而且还是用yeoman先搭好的骨架网站 : 现在朋友有个用django做的网站希望多点网页部分的互动 : 但是他不想要django template全部废掉只有API回传资料 : 我试着在用django template的情况下写遇到了几个问题 : 我想要像写Ember.js那样子 : 把全部我们自己写的javascript压成一包每个网页都引入 : 不过这样子我不知道怎麽让那一包的一大堆只是针对某个网页的程式只在那个网页跑起来 : 许多程式都是用$(document).ready当进入点的 : 是变成每个网页都有一个特定id : 如果程式没有找到他对应的id就跳过？ : 或是根本就不应该全部压起来 : 应该每个网页只引入对应的程式？ : 现在主要只有用jQuery去连事件 : 但是像那种button送事件的 : 如果不想要在template里面加一堆onClick的话 : 那就是变成要$el.on('click')... : 同样的如果全部自己的程式码压成一大包 : 要选到唯一的DOM元素好像会变成每个selector都很长？ : 或是template里面html id每天飞？ : 以前对框架依赖很深 : 现在要写这种只有jQuery的反而不知道该怎麽写才可以达到好维护的目的？ : 用React.js或是Backbone.js会有比较好吗？ : 我看过React.js教学 : 感觉他比较像是写Single Page Application的 : 跟django template搭起来有点没有头绪 先解决你主要问题： 可以用 jQuery(parentElm).on("click", ".targetSelector", handler) 的方式绑事件，概念是如果本来要绑在该元件上， 那就改成绑在它的 parent 只是在 on 的第二个参数放该元件的特定 selector 这样的好处是因为事件是绑在 parentElm 上面的，所以元件动态产生并append到 parentElm 时，就会自动有该 event 的行为 举例： <div class="listContainer"> <div class="listNode">1</div> <div class="listNode">2</div> <div class="listNode">3</div> <div class="listNode">4</div> </div> 你当然可以用 jQuery(".listNode").on("click", function(){console.log("clicked")}) 不过今天动态长出 listNode (或着 template, in your case)时，就需要在产生的时候 再下一个 jQuery(this).on( ... ) 但如果改成 jQuery(".listContainer") .on("click", ".listNode", function(){console.log("clicked")}) 那底下动态产生的 listNode 就不需要被绑 event 也能有事件产生。 其实作原理是把 event 绑在 .listContainer 上， 当今天 .listContainer 被触发 click事件时，就去检查触发的 target 是不是 第二个参数的 selector, 如果是，才会执行 eventHandler --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 60.250.147.33 ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1429843849.A.C16.html