頁面加載后使用jQuery收集動態添加的dom元素

Question

好吧，所以我最近從一個客戶那里收到了這個項目。 他們需要一個離線和在線網站，可以通過USB驅動器將其加載到ipad或遠程源上，而無需互聯網連接。 因此，所有文件都必須以“ .html”擴展名。 為了使維護和更改更容易，我使用javascript將內容的全局部分加載到頁面中，尤其是導航。 我在嘗試查找添加的新元素時遇到了麻煩，這是我通過ajax加載到dom中的nav.tpl的示例：

                    <li><a href="index.html" class="nav-grey"><span class="spacer"></span>HOME<span class="spacer"></span></a></li>
                    <li class="dropdown">
                        <a href="unmatched_simplicity.html" class="nav-red">unmatched <br/> SIMPLICITY</a>
                        <ul class="dropdown-menu">
                            <li><a href="unmatched_simplicity-easy_to_use.html">Easy to Use</a></li>
                            <li><a href="unmatched_simplicity-cashier_workstation.html">Cashier Workstation Screen</a></li>
                            <li class="dropdown-submenu">
                                <a tabindex="-1" href="unmatched_simplicity-fuel.html">Fuel</a>
                                <ul class="dropdown-menu">
                                    <li><a tabindex="-1" href="unmatched_simplicity-fuel-authorize_pump.html">Authorize Pump</a></li>
                                    <li><a tabindex="-1" href="unmatched_simplicity-fuel-all_stop.html">All Stop</a></li>

這是JavaScript：

$ .get（“ lib / nav.tpl”，function（navItems）{$（“ .nav”）.html（navItems）;}）;

現在，我有一個用於組織目的的命名約定以及面包屑，現在我正試圖使用​​它來檢測當前頁面所在的導航項。 基本上，每個級別的頁面都由“-”分隔。 我的目標是使用url查找帶有href =的錨點到當前頁面，然后轉到其父級“ li”並添加活動類“ .active”。 這就是我所擁有的：

( function( window ) {

        var location = locationTiers = '';

        location = window.location.pathname;
        location = location.substr( location.indexOf('/') + 1 ); 
        location = location.replace('.html', '');

        locationTiers = location.split('-');

console.log( $( 'a[href="'+ locationTiers[0] +'.html"]' ).parent('li') );

    }) ( window );

這很奇怪，因為如果刪除“ .parent（'li'）”，我可以找到錨點，但是使用“ .parent（'li'）”，它將返回空值。 似乎如果找不到“ li”，就找不到“ a”。 我知道.on（）可以實時替代，但這主要是用於檢測事件。

我希望我可以做這樣的事情：

$('body','a[href="'+ locationTiers[0] +'.html"]').parent('li')

與.on live方法類似，但這也不起作用。 如果有人可以幫助我弄清楚如何找到此動態添加的商品，將不勝感激！

謝謝

Answer 1

由於導航項是由ajax請求加載的，因此您需要將位置代碼移動到加載導航項的成功處理程序中

$.get("lib/nav.tpl", function (navItems) {
    $(".nav").html(navItems);

    var location = locationTiers = '';

    location = window.location.pathname;
    location = location.substr(location.indexOf('/') + 1);
    location = location.replace('.html', '');

    locationTiers = location.split('-');

    console.log($('a[href="' + locationTiers[0] + '.html"]').parent('li'));

});

Answer 2

試試這個代替

( function( window ) {

    var location = locationTiers = '';

    location = window.location.pathname;
    location = location.substr( location.indexOf('/') + 1 ); 
    location = location.replace('.html', '');

    locationTiers = location.split('-');
    var subject = $('a[href="'+ locationTiers[0] +'.html"]');
    var parent = subject.parent();
    console.log({'is_li':parent.is('li'),'parent':parent});

}) ( window );

它應返回“ is_li”為true或false的對象，如果為true，則第二部分應具有jQuery li對象。

有以下原因不起作用的原因：

$('body','a[href="'+ locationTiers[0] +'.html"]').parent('li');

jQuery在選擇器$（'body'，'{this guy}'）上的第二個參數實際上是您可以在其中提供XML / HTML字符串/對象並在其中搜索“ body”（或任何選擇器的位置）的地方。

您應該提供更多信息，查找LI以將其標記為活動狀態是什么目的？ 還是僅當插入內容時？或者您要選擇默認菜單項？

無論如何，這應該是一個相當容易的修復。 保持聯系。