2014-08-29 84 views
0

我一直無法找到關於我在本網站或其他任何網站上掙扎的任何討論,但也許我沒有提出正確的問題。我工作的一個Web界面搭載了樹莓派無線揚聲器,並且(我繼承了它),幾乎所有的POST請求與呼叫做$.ajax.$().ready()如下:Jquery - 在頁面加載後更改了目標元素

$().ready(function(){ 
     $(document).ajaxStart(function(){ 
      $.blockUI({ message: '<img id="loadimg" src="img/loading.gif" width="64" />'}); 
     }).ajaxStop($.unblockUI); 

    $("nav.setup-nav a").not("[target='_blank']").on("click", function (event){ 
     event.preventDefault(); 
     var href=$(this).attr('href'); 
     $.ajax({ 
      type:"POST", 
      url:href, 
      success:function (data){ 
       $(".contentPanel").html(data); 
       $(this).blur(); 
       $("html, body").animate({ scrollTop:100, scrollLeft:400}, 600); 
       }, 
      }); 
      return false; 
     }); 
    }); 

哪支部隊導航菜單中鏈接頁面的所有內容加載到頁面中心的div內。也就是說,除了具有target="_blank"屬性的頁面。這是如此event.preventDefault和鏈接到我們要加載到一個新窗口的外部頁面時,UI阻塞的東西不會被調用。我將嘗試簡要描述我的問題:其中一個菜單項是(有條件的)指向基於Web的MPD客戶端的鏈接,我們絕對不希望在同一頁面的div中加載,因此具有target="_blank"屬性。問題是用戶也可以選擇通過Web界面啓用或禁用MPD守護進程。 PHP處理所有這些類型的狀態變量的設置。基本上是這樣的:

if ($config->is_flag_set($MPD_FLAG)) 
    { 
     echo '<li><a target="_blank" id="mpd" href="rompr/">Local Playback Web Interface</a></li>'; 
    } 
    else 
    { 
     echo '<li><a id="mpd" href="local-disabled.php">Local Playback Web Interface</a></li>'; 
    } 

所以當第一次加載頁面,如果MPD守護程序沒有運行的鏈接網頁界面指向解釋MPD頁面未啓用。此鏈接不包含target="_blank"屬性。但是,如果導航到設置表單並打開MPD,則有邏輯來替換該特定鏈接的href和target屬性,因此理論上所有工作都應該像頁面最初加載了MPD標誌一樣工作(如果是明確!)。問題是,當target="_blank"(由.prop().attr()設置,我已經嘗試過這兩個並且似乎沒有區別)的「替換」鏈接被點擊後,頁面仍然在div內加載!我嘗試複製在$().ready中定義的點擊處理程序,並將其放入另一個函數中,在設置了鏈接屬性後調用它,但它仍然不起作用,因爲我認爲它應該!爲了驗證我沒有發瘋,我使用.each()來打印所有鏈接,並且沒有target="_blank"屬性,並且這些鏈接都與我認爲應該是的相對應。爲什麼被替換的鏈接不被視爲在點擊處理程序中具有target="_blank"屬性?順便說一下,如果MPD關閉,則以其他方式去除target="_blank"屬性,就像魅力一樣。非常感謝您提供任何答案,如果我重複了上一個問題,我很抱歉!

歡呼聲,

回答

0

任何時候你必須用ajax重新加載元素時,事件總是很棘手。我發現最好的辦法是附加的事件,一些容器元素,不會重新加載:

$('#always_present_container').on('click', "nav.setup-nav a", function (event){ 
    if($(this).attr('target') != '_blank'){ 
     ... 
    } 

}); 

這樣被點擊的容器,當元素被檢查的屬性。當你設置$('element')。click()時,選擇器在頁面加載和附加事件上被選中,所以當你通過ajax重新加載某些東西時,新元素不會附加這個事件。

注意:通常你可以避免函數中的條件語句,但我不知道在css選擇器中按目標過濾的簡單方法。

+0

那就是票。現在我覺得愚蠢 - 父導航元素永遠不會改變,我只是忘了你可以傳遞一個選擇器參數給'.on()'!謝謝! – jhansen317 2014-08-29 20:27:58