※ 引述《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/m.aspx?n=bbs/Ajax/M.1429843849.A.C16.html