javascript - 为什么这个 jQuery 不影响 PHP 输出的元素，只影响 HTML 中定义的元素？

Question

我正在尝试制作一个类似于 this 的动态导航菜单。 JavaScript 是 here当我测试它时，效果非常好:

<div id='nav'>
        <ul>
            <li class="navHeader">OOC</li>
            <li><a href='#'>Home</a></li>
            <li class='active'><a href='#'>Products</a>
                <ul>
                    <li><a href='#'>Product 1</a>
                        <ul>
                            <li><a href='#'>Sub Product</a></li>
                            <li><a href='#'>Sub Product</a></li>
                        </ul>
                    </li>

                    <li><a href='#'>Product 2</a>
                        <ul>
                            <li><a href='#'>Sub Product</a></li>
                            <li><a href='#'>Sub Product</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

但是，我尝试将导航内容切换为:

<div id='nav'>
        <ul>
            <li class="navHeader">OOC</li>
            <?php echo getNav(); ?>
        </ul>
    </div>

PHP:

function formatNav($navPg){
    $navLine = "<li><a href='?pg=".$navPg['url']."'>".$navPg['name']."</a></li>";
    if ($navPg['subPgs'] > 0) {
        $navLine .= "<ul>";
        foreach($navPg['subPgs'] as $subPg) {
            $navLine .= formatNav($subPg);
        }
        $navLine .= "</ul>";
    }
    return $navLine;
}

function getNav(){
        $navPgs = array(array(
                            'name'=>'profile',
                            'url'=>'profile',
                            'subPgs'=>array(
                                array(
                                    'name'=>'subaccounts',
                                    'url'=>'profile&cat=subs',
                                    'subPgs'=>''
                                ),
                                array(
                                    'name'=>'options',
                                    'url'=>'profile&cat=opts',
                                    'subPgs'=>''
                                )
                            )
                        )
                    );

    $finalNav = "";
    foreach($navPgs as $navPg){
        $finalNav .= formatNav($navPg);
    }
    return $finalNav;
}

并且没有任何 Javascript 在其上运行。

JS没有添加类has-sub到li具有子菜单的元素。具有 has-sub 的元素在 PHP 中添加可以正确显示其 CSS，但不执行下拉事件。我调试了<ul>的列表cssmenu.find('li ul').parent().addClass('has-sub'); 之后找到的元素在 JS 中，并且不包括 PHP 生成的。

我调试了 PHP 输出，它是一组完美的 li 和 ul 元素，就像我手动格式化它们一样。 JS 本身工作得很好，PHP 本身工作得很好，但是当我尝试将它们组合起来时，JS 失败了。

有人有 the same problem here ，但答案没有帮助。我可以更改我的实现，根据有关它的 JSON 质量列表在 javascript 中动态构建列表元素，但我想知道为什么我必须这样做，而不是直接从 PHP 中回显它们，特别是如果有更直接的解决方法。

PHP 是否在 $(document).ready 之后运行即使它在服务器端运行，也会以某种方式触发？

JS 在客户端运行，但从服务器端脚本输出的有效 DOM 元素应该与客户端创建的元素没有区别。对吗？

为什么不是这个？

编辑:PHP 本身的输出图片。看起来没什么问题。

Answer 1

该函数没有生成相同的结构，这可能是问题所在。

我已经调整了您的函数以返回与您的工作相同的结构。

尝试一下。

<?php
function formatNav($navPg){
    $navLine = "<li><a href='".$navPg['url']."'>".$navPg['name']."</a>";
    if (is_array($navPg['subPgs']) && count($navPg['subPgs']) > 0) {
        $navLine .= "<ul>";
        foreach($navPg['subPgs'] as $subPg) {
            $navLine .= formatNav($subPg);
        }
        $navLine .= "</ul>";
    } else {
        $navLine .= "</li>";
    }
    if (is_array($navPg['subPgs']) && count($navPg['subPgs']) > 0) {
        $navLine .= "</li>";
    }
    return $navLine;
}

function getNav(){
    $navPgs = array(
        array(
            'name'=>'Home',
            'url'=>'#',
            'subPgs'=>array()
        ),
        array(
            'name'=>'Products',
            'url'=>'#',
            'subPgs'=>array(
                array(
                    'name'=>'Product 1',
                    'url'=>'#',
                    'subPgs'=>array(
                        array(
                            'name'=>'Sub Product',
                            'url'=>'#',
                            'subPgs'=>array()
                        ),array(
                            'name'=>'Sub Product',
                            'url'=>'#',
                            'subPgs'=>array()
                        ),
                    )
                ),
                array(
                    'name'=>'Product 2',
                    'url'=>'#',
                    'subPgs'=>array(
                        array(
                            'name'=>'Sub Product',
                            'url'=>'#',
                            'subPgs'=>array()
                        ),array(
                            'name'=>'Sub Product',
                            'url'=>'#',
                            'subPgs'=>array()
                        ),
                    )
                )
            )
        )
    );

    $finalNav = "";
    foreach($navPgs as $navPg){
        $finalNav .= formatNav($navPg);
    }
    return $finalNav;
}

https://3v4l.org/gjM0Y

<div id='nav'>
   <ul>
      <li class="navHeader">OOC</li>
      <li><a href='#'>Home</a></li>
      <li>
         <a href='#'>Products</a>
         <ul>
            <li>
               <a href='#'>Product 1</a>
               <ul>
                  <li><a href='#'>Sub Product</a></li>
                  <li><a href='#'>Sub Product</a></li>
               </ul>
            </li>
            <li>
               <a href='#'>Product 2</a>
               <ul>
                  <li><a href='#'>Sub Product</a></li>
                  <li><a href='#'>Sub Product</a></li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</div>