2014-04-08 177 views
0

加時在Web項目中,有必要在某種重疊窗口的打開一些鏈接,而其他人應該只是正常打開。更改某些錨標籤的行爲,甚至是動態

的聯繫總是正常錨標記,並可以...

  • 被添加爲模板固定內容
  • 通過使用HTML編輯器,如tinyMCE的

我版主加入花了相當長的時間考慮一下什麼是安全,適當,相當交叉的兼容和優雅的機制。我最後的想法是利用在a標籤都有效稱爲overlayWindow一類,只是迫使版主將該類添加到鏈接,如果他們創造他們想被疊加窗口內打開鏈接。

這一切都很好。現在我可以這樣做:

$(document).ready(function(){ 
    $('a.overlayWindow').on('click', function(event){ 
     event.preventDefault(); 
     // set off an ajax request to get overlay window content, then display it 
    }); 
}); 

太好了。但有一個問題。錨標籤也

  • 動態地提供,甚至加入到網頁頁面加載後

這意味着我需要一些安全的方式,以確保上面的代碼,只要任何進一步錨執行標籤被添加到頁面(通過任何方式)。

由於這似乎很遠,我還可以忍受那種攔截所有Ajax請求,並確保每當一個Ajax調用完成執行準備代碼的解決方案。

可以這樣做嗎?如果是,如何?

(我也相當開放,以完全不同的方法來解決我的實際問題,因此任何建議,歡迎)。

+0

是什麼問題?如果您使用.on(),則點擊處理程序將被添加到所有元素。將它們添加到DOM中並不重要 –

+0

對不起,我第一次誤讀你的評論。我認爲使用選擇器並對它返回的元素應用特定的處理程序只會影響那些在給定時間點是文檔一部分的元素? – SquareCat

+0

@Scott:那是不正確的。 「on」只適用於你與事件代表團的建議。 OPs代碼不知道這一點(它需要事件名稱和回調函數之間的附加參數)。看到我的答案。另外:https://learn.jquery.com/events/event-delegation/ – Faust

回答

1

實現此目標的標準方法是使用event delegation.所有的點擊事件都會通過DOM中的祖先元素「冒泡」,並可以作爲點擊任何一個祖先元素而被攔截。

所以在事件名稱和回調函數之間的.on函數添加一個參數 - 將選擇爲點擊的元素有來代替。現在,對容器對象調用jquery $(),該容器對象在向容器中冒泡時監聽點擊。

例如,如果您確定所有這些鏈接都將放置在某個級別內,例如應用於它們的類'containerClassName'的任何div,並且您確信此類容器div始終存在在頁面加載,然後:

$('.containerClassName').on('click', 'a.overlayWindow', function(event){ ... //etc. 

將確保所有overlayWindow鏈接將得到「聽說」時,他們的點擊泡泡高達.containerClassName。然後,事件可以正確處理,並與您提供的回調,this代表a.overlayWindow鏈接。

+0

謝謝你,我明白你的觀點,但問題恰恰在於某些這樣的標籤在頁面加載時可能不可用。 – SquareCat

+0

我明白了。你只需要確保包含這些標籤的* some *元素存在於pageload中,而不是標籤本身。對不起,如果我不清楚。這是您使用'containerClassName'定位的容器。這甚至可以是'body'元素(儘管這通常是出於性能原因而建議的)。 – Faust

+0

爲什麼不按照您需要的方式製作錨點並顯示:none;?然後你可以使用jquery在需要時通過.clone()複製它,然後設置display來阻塞新克隆的錨點。 –