[問題] ajax load() 函式沒有作用

看板Ajax作者 (Hades)時間11年前 (2013/10/31 05:42), 編輯推噓8(9151)
留言61則, 7人參與, 最新討論串1/1
各位大大好 小弟我下載了一個jquery的網頁模板 而這個模板他把所有的功能、內容都寫在同一個html裡面 不過我怕最後會很難維護,所以想要把每個tab menu功能分開來在不同頁面去寫 想說可以用ajax裡的load()函式做處理 ------------------------------------------------------ tab menu 程式如下 <div id="p" class="test"> <a href="#" id="a" class="page1">首頁 </a> <a href="#" id="b" class="page2">功能1</a> <a href="#" id="c" class="page3">功能2</a> <a href="#" id="d" class="page4">功能3</a> <a href="#" id="e" class="page5">功能4</a> </div> ------------------------------------------------------ 內文程式 <div id="f1" class="content"> 功能1 </div> <div id="f2" class="content"> 功能2 </div> ..以此類推 ------------------------------------------------------ ajax load()的寫法 <script> $('#a').click(function () { $('#f1').load('a.html'); }); $('#b').click(function () { $('#f2').load('b.html'); }); $('#c').click(function () { $('#f3').load('c.html'); }); ...以此類推 </script> ------------------------------------------------------- 但是這樣卻起不了甚麼功用...,不知道是哪邊寫錯了 怕這樣描述還是不清楚,所以整理了一下簡易的程式碼附上來 http://goo.gl/AUKpCb 感謝幫忙! -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 140.118.109.17

10/31 10:40, , 1F
先確認你的click事件有沒有正確綁上去並觸發
10/31 10:40, 1F

10/31 12:47, , 2F
我用你網頁跑一次沒問題阿,動作都正常,清快取再試一次吧
10/31 12:47, 2F

10/31 15:01, , 3F
$("#a").on('click',function(){
10/31 15:01, 3F

10/31 15:01, , 4F
$("#f1").load('a.html');});
10/31 15:01, 4F

10/31 15:02, , 5F
兩行合再一起 試試看
10/31 15:02, 5F

10/31 15:29, , 6F
更正 放到HTTP server IIS或Apache運行看看
10/31 15:29, 6F

11/01 17:58, , 7F
這方法剛剛試過好像一樣沒變化,click事件是有觸發
11/01 17:58, 7F

11/01 17:59, , 8F
不知道是哪邊出了狀況說...
11/01 17:59, 8F

11/01 20:33, , 9F
請問您有把檔案放到http server了嗎?
11/01 20:33, 9F

11/01 21:24, , 10F
的確滿有可能是沒放進HTTP SERVER執行
11/01 21:24, 10F

11/01 22:33, , 11F
跑 js 需要放 server 嗎.. 我直接開可以跑,正常。
11/01 22:33, 11F

11/01 22:41, , 12F
需要存取其他檔案的網頁,的確不能在本機執行
11/01 22:41, 12F

11/01 22:42, , 13F
js在本機執行的權限,也只有ie能開
11/01 22:42, 13F

11/02 01:04, , 14F
我把它放在IIS上面,不過a、b、c..html內容似乎是沒load
11/02 01:04, 14F

11/02 01:05, , 15F
進去
11/02 01:05, 15F

11/02 01:09, , 16F
http://140.118.109.17/test/ 這是架在IIS上的,目前是
11/02 01:09, 16F

11/02 01:09, , 17F
用$("#a").on('click',function(){$("#f1").load('a.htm
11/02 01:09, 17F

11/02 01:10, , 18F
l');});這個方法,不過他似乎沒有載入a、b、c..html的內
11/02 01:10, 18F

11/02 01:11, , 19F
11/02 01:11, 19F

11/02 01:13, , 20F
那個藍色的字 "首頁、功能1、2、3.."只是原本標題,並非
11/02 01:13, 20F

11/02 01:14, , 21F
是其他HTML裡的內容喔! 另外我用IE開好像也不行= =
11/02 01:14, 21F

11/02 01:17, , 22F
不過很怪的是,滑鼠移到tab menu,是有顯示a、b、c、...
11/02 01:17, 22F

11/02 01:18, , 23F
html的網址,但內容卻沒有載進去那個div框架裡
11/02 01:18, 23F

11/02 01:21, , 24F
年輕人都很晚睡
11/02 01:21, 24F

11/02 01:22, , 25F
你寫的方式怪怪
11/02 01:22, 25F

11/02 01:22, , 26F
應該是1個div可以load不同的html檔
11/02 01:22, 26F

11/02 01:26, , 27F
用一下jquery 最新的版本或掛google jquery CDN
11/02 01:26, 27F

11/02 01:27, , 28F
設計的不錯 要是我有你的一 半就好了...
11/02 01:27, 28F

11/02 01:27, , 29F
前端跟後端的差異........
11/02 01:27, 29F

11/02 01:30, , 30F
11/02 01:30, 30F

11/02 01:30, , 31F
on的 jquery event在1.2.2還沒出生
11/02 01:30, 31F

11/02 01:31, , 32F
找一下FIRE FOX javascipt的console地方你就知道了
11/02 01:31, 32F

11/02 01:31, , 33F
喔! 是喔= =
11/02 01:31, 33F

11/02 01:32, , 34F
我只會chrome
11/02 01:32, 34F

11/02 01:32, , 35F
可以問一下您css 怎麼學的嗎?
11/02 01:32, 35F

11/02 01:33, , 36F
原本用的$('#a').click(function (){}這個方式也太新嗎?
11/02 01:33, 36F

11/02 01:35, , 37F
沒,我是套別人做好的模板要來寫後端ASP.NET的程式
11/02 01:35, 37F

11/02 01:35, , 38F
只是他給我寫再一起,怕之後不好維護,希望拆開來做...
11/02 01:35, 38F

11/02 01:38, , 39F
我剛剛試過我自己的sample 是OK的
11/02 01:38, 39F

11/02 01:38, , 40F
原來是同行...學生嗎?
11/02 01:38, 40F

11/02 01:40, , 41F
總之你就用最新版的Jquery 試試看吧
11/02 01:40, 41F

11/02 01:40, , 42F
是啊,還是學生
11/02 01:40, 42F

11/02 01:40, , 43F
畢竟你不可能找 2007 2008的JQUERY資料來用吧
11/02 01:40, 43F

11/02 01:40, , 44F
好的,我載最新的試試,感謝你!
11/02 01:40, 44F

11/02 01:41, , 45F
恩,也對..
11/02 01:41, 45F

11/02 01:41, , 46F
如果jq不熟你去估狗 30 Days to Learn jQuery
11/02 01:41, 46F

11/02 01:41, , 47F
這有免費的教學不過是英文
11/02 01:41, 47F

11/02 01:42, , 48F
我非本科系 在做pg卻同時包pm sa sd...
11/02 01:42, 48F

11/02 01:42, , 49F
主管看到畫面一直念醜...我還要兼美工
11/02 01:42, 49F

11/02 01:45, , 50F
JQ一個click事件可以用.bind/.on/.delegate寫出來
11/02 01:45, 50F

11/02 01:57, , 51F
可以問一下你js的版本是哪一個呢,我用2.0.3好像一樣
11/02 01:57, 51F

11/02 01:59, , 52F
我本來功能寫好了..老闆嫌太醜= =,要我弄一個好看的模
11/02 01:59, 52F

11/02 01:59, , 53F
版,然後從頭改在上面...
11/02 01:59, 53F

11/02 02:03, , 54F
非本科系包sasd...真的還蠻厲害的 <( ̄一 ̄ )
11/02 02:03, 54F

11/02 02:10, , 55F
我做好了...
11/02 02:10, 55F

11/02 02:14, , 56F

11/02 02:15, , 57F
...點錯點到噓
11/02 02:15, 57F

11/02 02:31, , 58F
剛剛測試過這個,是可以跑的,我明天用這方法套進去看看
11/02 02:31, 58F

11/02 02:32, , 59F
感謝me大這麼晚還要熬夜的幫忙,謝謝你啦! 先晚安啦!
11/02 02:32, 59F

11/02 11:34, , 60F
jQuery別用2.X.X 除非IE6-8沒打算支援 不然用1.X.X
11/02 11:34, 60F

11/07 02:11, , 61F
恩恩,感謝,目前用1.10.2
11/07 02:11, 61F
文章代碼(AID): #1ISNrAl2 (Ajax)
文章代碼(AID): #1ISNrAl2 (Ajax)