javascript - 如何创建 jQuery 函数？

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 6 年前。

我有一个菜单，仅适用于第一级和第二级，但我需要更深入并显示所有子级别。也许使用JQuery函数更好，但我不知道如何!加载时菜单是这样的:

更新
生成子关卡的代码:

foreach ($categories as $category) {
    $data['x'] .= '<li><a class=' . $category['category_id'] . ' id=' . $category['category_id'] . ' data-id=' . $category['category_id'] . '>' . $category['name'] . '</a></li>';
}

生成ROOT类别的代码:

<ul id="mnav" style="padding-top: 80px; background-color: #337ab7;">
    <?php foreach ($categories as $category) { ?>
    <li><a id="<?php echo $category['category_id']; ?>" class="list-group-item active"><?php echo $category['name']; ?></a></li>
    <?php } ?>
</ul>

编译的 PHP - HTML:

<ul id="mnav" style="padding-top: 80px; background-color: #337ab7;">
    <li><a id="24" class="list-group-item active">Machinery</a>
        <ul class="sub" id="sub1">
            <li><a class="2420" id="2420" data-id="2420">Agriculture Machinery Equipment</a></li>
            <li><a class="2407" id="2407" data-id="2407">Apparel Textile Machinery</a></li>
            <li><a class="2409" id="2409" data-id="2409">Building Material Machinery</a></li>
            <div class="list-group"> </div>
        </ul>
    </li>
    <li><a id="29" class="list-group-item active">Packaging &amp; Printing</a></li>
    <li><a id="26" class="list-group-item active">Mechanical Parts &amp; Fabrication Services</a></li>
</ul>

为了实现这一点，我使用这样的脚本:

<script type="text/javascript"> 
    $(document).ready(function(){ 
        $('ul#mnav > li > a').on('click', function(e) { 
            console.log("Level 1"); 
            e.preventDefault(); 
            var cat = $(this).attr('id'); 
            var url = 'index.php?route=test/categoryx/child&category_id=' + cat; 

            $('#mnav #sub1').remove(); 
            $( $("<ul class='sub' id='sub1'>").load(url + "#myContainer") ).insertAfter( '#mnav #' + cat );
        }); 

        $('ul#sub1 a').on('click', function(e) { 
            console.log("Level 2"); 
            e.preventDefault(); 
            var cat = $(this).attr('id'); 
            var url = 'index.php?route=test/categoryx/child&category_id=' + cat; 

            $('#sub2').remove(); 
            $( $("<ul class='sub' id='sub2'>").load(url + "#myContainer") ).insertAfter( 'ul#sub1 #' + cat );
        }); 
</script> 

我尝试了不同的方法来进入第二级，但没有成功，我尝试了很多不同的方法。

Answer 1

你可以尝试:

$(".drop").on("click", "li", function (event) {
    console.log('a');
});

或者使用 find() 函数:

$(".drop").find("li").click(function(){
  alert("You clicked on li " + $(this).text());
});