設置按鈕HTML聲明一個jQuery功能

-1

我試圖使用AJAX載一組逐次頁面的主頁面，我告訴你，在未來的畫面：設置按鈕HTML聲明一個jQuery功能

enter image description here

我學會了（感謝這個社會！）調用其他網頁的內容，通過指定的load（）函數到按鈕的onclick事件，像這樣：

$(document).ready(function() { 
     $('#btn').click(function() { 
     $('#result').load('./poi-data-no-heading.html'); 
     }); 
});

但是，如果我有一個ID一個鍵=」 btn「在每一頁上？任何具有該id的按鈕的功能將始終是相同的，因爲（我認爲）document.ready在我使用load（）方法時未觸發，因此它永遠不會被新功能所取代。

E.g.最初的功能應該從第1頁被導航到第2頁，第2頁加載時，該功能應該是導航從第2頁第3頁。

由於開發商的js，我會做到以下幾點：

<!-- In the HTML file --> 
<button id="btn" onclick="loadContent()">Load</button> 
<div id="result"></div> 

/* In the JS file */ 
function loadContent(){ 
    /*the code to retrieve content*/ 
    $('#result').load('http://fiddle.jshell.net/webdevem/JfcJp/show/'); 
}

這樣我可以將功能分配給每個按鈕，不管ID是什麼或者document.ready被觸發。但是將Js與JQuery混合並不是一種選擇......那麼，您覺得我應該如何設法使用JQuery來做類似的事情？

在此先感謝。 P/d：這裏是我曾經嘗試的想法一個有用的小提琴：http://jsfiddle.net/gal007/vkcug7t7/1/

來源

2014-09-03 gal007

這就是單擊處理我前面建議。並沒有upvote。悲傷的臉：（ – ne1410s 2014-09-03 20:01:53

OMG！對不起！讓我看看 – gal007 2014-09-03 20:02:44

聽起來像[事件代表團]的使用案例（https://learn.jquery.com/events/event-delegation/），其中jQuery的'.on（）'支持 – ajp15243 2014-09-03 20:06:24

你可以使用jQuery的距離，它可以偵聽動態渲染的元素事件（你不能做的on()事件與click()方法）。因此，在這種情況下，您必須在父元素上偵聽事件，而不會因load方法而更改。在該按鈕上，使用HTML5 data-*屬性來定義您希望加載的ID。

HTML：

<btn id="result" data-load-id="1">Load</btn>

的Javascript：

$('#container').on('click', '#result', function() { 
    var id_to_load = $(this).data('load-id'); 
    load('/url?' + id_to_load); 
});

我已經更新了你的提琴：jsfiddle

來源

2014-09-03 20:10:06 drskullster

答案很簡單，答案聽起來像'.on（）'只支持這種形式的事件處理（事件委託），它也支持事件處理而不用監聽子元素上的事件（normal事件） – ajp15243 2014-09-03 20:25:49

你是對的，我已經更新了，謝謝 – drskullster 2014-09-03 20:41:25

或者更簡單：http://jsfiddle.net/gal007/vkcug7t7/9/ – gal007 2014-09-04 13:22:14

設置按鈕HTML聲明一個jQuery功能

回答

相關問題