1

I have a menu which works perfect for 1st and 2nd level only, but I need to go deeper and show all sub levels. Maybe it's better to use JQuery function, but I don't know how! The menu is something like this when it loads:

UPDATE
The code that generates sub levels:

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>';
}

The code which generates ROOT categories:

<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>

Compiled 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>

To achieve this, I'm using such a script:

<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>

I tried different ways to get access to 2nd level but it's not successful, I tried many different things.

Kardo
  • 1,438
  • 3
  • 28
  • 46
  • You don't have any element with `id="sub1"` or `id="mnav"`. That's why the onclick functions aren't trigerring. – Louys Patrice Bessette May 27 '17 at 17:14
  • Please put in a compiled php too, because I can't see `mnav` in html – Marko Mackic May 27 '17 at 17:18
  • Is this perhaps a PHP issue rather than your tags? – Mark Schultheiss May 27 '17 at 17:19
  • 1
    You might want to read the jQuery tutorial: https://learn.jquery.com/about-jquery/how-jquery-works/ (and https://learn.jquery.com/using-jquery-core/selecting-elements/ and all the other articles there) instead of trying random things. – Felix Kling May 27 '17 at 17:52
  • @FelixKling: The problem is it's more than what's explained in those tutorials. The same code works fine with html not generated by ajax. – Kardo May 27 '17 at 17:57
  • 1
    Well, you are not really describing what the problem is and the title is vacuous. "It doesn't work" is not a useful problem description (see [ask] for how to write a better question). I can only assume that your problem is [Event binding on dynamically created elements?](https://stackoverflow.com/q/203198/218196) – Felix Kling May 27 '17 at 18:03
  • 1
    Have a look at the link in my previous comment. I assume that's the issue. Anything about your problem should be in your post itself. I shouldn't have to go to your page to find out what's wrong, especially since you will fix it at some point, so future visitors won't know what is wrong. – Felix Kling May 27 '17 at 18:11
  • @FelixKling: Thanks a lot man! I got the answer right there: $(staticAncestors).on(eventName, dynamicChild, function() {}); – Kardo May 27 '17 at 18:14

1 Answers1

0

You can try :

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

Or using the find() function :

$(".drop").find("li").click(function(){
  alert("You clicked on li " + $(this).text());
});
max
  • 433
  • 2
  • 10
  • 23
  • I didn't understand what's ".drop", but anyway I tried "#sub1" instead, but nothing happend. – Kardo May 27 '17 at 17:50