2010-07-30 44 views
0

我只是沒有得到與jquery ui選項卡的事件代表團,或根本沒有!不理解與jquery ui選項卡的事件代表團

我得到了jquery ui選項卡的代碼,並加載完美的Ajax工作的頁面。但是我無法理解事件委派。我加載了4個帶有外部內容的選項卡,具體取決於打開的選項卡。在這些選項卡中,我希望將相同的小部件附加到輸入按鈕和鏈接。到目前爲止,我的代碼看起來像這樣

JS進行頁面的其餘部分已經裝

$("button, input:submit, a", ".create_button").button(); 
$("a.edit_button").button({ 
     icons: {primary: 'ui-icon-pencil'} 
    }); 
    $("a.delete_button").button({ 
     icons: {primary: 'ui-icon-circle-close'} 
    }); 
    $("a.active_button").button({ 
     icons: {primary: 'ui-icon-lightbulb'} 
    }); 

JS對於標籤:

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#tabs").tabs({ 
      ajaxOptions: {error: function(xhr, status, index, anchor) 
             {$(anchor.hash).html("Could not load");}}, 
      selected: 0}) 
     }); 
</script> 

HTML

<div id="tabs"> 
    <ul> 
    <li><a href="ajax_passes/member_id/9">Pass Information</a></li> 
    <li><a href="ajax_entries/member_id/9">Entries</a></li> 
    <li><a href="ajax_event/member_id/9">Event Administration</a></li> 
    <li><a href="ajax_profile/member_id/9">Profile</a></li> 
    </ul> 
</div> 

我在這裏學習了堆棧溢出,我必須將一個click事件附加到live()的#tabs div上。無論如何,最佳猜測。

但是我找不到任何適合我的例子和對事件委派的有限理解。

任何幫助表示讚賞。 裏克

回答

0

原來,.live()只適用於事件。因此,儘管我可以將某些內容綁定到鏈接,但直到鏈接發生事件(即單擊或懸停)纔會真正起作用。

解決方法是將事件動態添加到帶有加載內容的鏈接,但這非常棘手,並且會給應用程序增加很多開銷。相反,我選擇以不同的方式在加載的內容中進行樣式化。在學習這個過程中,我最終使用live()進行了表單提交,並在提交後重新加載了內容。

謝謝你們的幫助。 RWL。你最終沒有真正回答這個問題,但是你的刺激使我朝着正確的方向發展,並且我學到了很多東西。我最終能夠自己解決問題。你知道,給一個人釣魚或教他釣魚,yadi yadi yadi ...

謝謝!

0

現在,你有「錯誤」被處理,但沒有別的。你需要處理「成功」或「完整」......實際上,你爲什麼要使用AJAX?你似乎沒有要求從頁面以外的任何數據?

+0

感謝您的回覆Steve, 我直接從jquery ui示例中爲ajax進行了錯誤處理。 我從這些標籤中成功加載了3個單獨的表單,我希望這些表單上的提交按鈕能夠從頁面的其餘部分填充ui主題。 CSS附加,但JavaScript不是。 ajax加載的內容不起作用。我想要「重新綁定」或使用「事件代理」方法來使輸入行爲,但我不知道如何。 http://www.learningjquery.com/2008/03/working-with-events-part-1 感謝 – 2010-07-30 21:10:08

0

這似乎是關鍵,你的問題是這樣的:

那些我想同樣的部件連接到輸入按鈕和鏈接標籤內。

聽起來像是你要使用的標籤控件的「秀」的方法:

$(document).ready(function() { 
     $("#tabs").tabs({ 
     ajaxOptions: {error: function(xhr, status, index, anchor) 
            {$(anchor.hash).html("Could not load");}}, 
     selected: 0, 
     show: function() { 
     $([selectors for buttons or jQuery UI widgets in your tabs]).button(); 
     } 
    }) 
}); 

FWIW,這個問題是不是真正的event delegation。那篇文章對理解這個概念很有用。

+0

謝謝RWL, 這是我的理解是,節目是爲了實現div的顯示和地役權你正在選擇。但我很新,來自php,不知道什麼。我用合適的選擇器試過了你的代碼片段,它不起作用。 我試圖對常見問題http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F 似乎是一個很常見的問題中提到的事件委託方法,但我在這個如此不確定的語法點,我似乎無法使這些示例工作到我的特殊需求 – 2010-07-30 21:21:03

+0

是的,顯示只是一個事件,標籤觸發時顯示一個選項卡,所以你可以腳本任何你想發生的:http:// jqueryui。 com/demos/tabs /#event-show 無論如何,如果它不起作用,可能是在加載ajax內容之前,標籤的show事件正在觸發。試試我提供的那一行 - $([你的選擇器])。 - 成功:您的ajaxOptions對象的功能。 – RwwL 2010-07-30 21:59:54

+0

另外,您再也不需要太擔心委派。你需要在這裏做的更像是你的註釋中的鏈接重新綁定的例子,除了重新綁定事件處理程序的東西,你需要重新初始化已經選擇的按鈕小部件新插入您的DOM。 Livequery插件仍然存在於文檔中,這真是一個恥辱。這是舊的 - 從那時起,該插件已被燒入核心:http://api.jquery.com/live/ – RwwL 2010-07-30 22:10:56