li click listener not triggering because of underlaying div with e.stopPropagation

Question

i want to trigger the click event of my dynamic generated list-items. The div where the list is in has a click-event to stopPropagation, so that the dropdown list don't toggle's by clicking list-items. Without stopPropagation, the click is working but my dropdown list broke.

Is there any chance to get this working?

//Dropdown Script
$('.nav-drop-down').click(function(){
    let toggleEle = $( this ).find('.drop-down-list');
    $('.drop-down-list').not( toggleEle ).hide();
    toggleEle.slideToggle();
});
$('.drop-down-list').click(function(e){
  e.stopPropagation();
});
  //Add Live Search
  var currencies = ['EUR', 'USD', 'UK', 'UKA', 'PND', 'USA'];
  addLiveSearchToElement($('#currency-filter'), currencies, 'change-currency');


  function addLiveSearchToElement(ele, arr, liClass){ 
    ele.keyup(function(){
        //Get ul-list
        let list = $( this ).next();
        //Store User input
        let input = $( this ).val();
        list.empty();
        $.each(arr, function(i, value) {
          if(input != ''){
              if(value.toLowerCase().indexOf(input.toLowerCase()) != -1){
                list.append(`<li class="${liClass}"> ${arr[i]} </li>`);
              }
          } else {
              list.append(`<li class="${liClass}"> ${ value } </li>`);
          }
        });
    });

      if(liClass != ''){
        console.log("Doin it");
        $('ul').on('click', `li.${liClass}`, function() {
          console.log("Hello...");
        });
      }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="position-relative d-flex nav-drop-down no-select">
          <span>USD Currency</span>
          <div class="position-absolute drop-down-list">
            <input id="currency-filter" placeholder="Filter..." />
            <ul class="list-dropdown">
              <li>
                Item 1
              </li>
              <li>
                Item 2
              </li>
            </ul>
          </div>

Does this answer your question? [Attach event to dynamic elements in javascript](https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript) — Ravi Kukreja, Jul 24 '20 at 18:46
Hey Ravi, i replaced my code for binding the click event with "$(document).on('click', `li.${liClass}`, function() {" but still not firing. — Sagích dirnet, Jul 24 '20 at 18:54
It might have to do with your selector ``li.${liClass}``. Your li elements do not have any class in the code you have posted. — Ravi Kukreja, Jul 24 '20 at 19:08
It's because u have to type something in first, so that the new classes were shown, because it's not in the standard list. — Sagích dirnet, Jul 24 '20 at 19:09
Got it. You need to add event listener to ``ul``. See my answer. — Ravi Kukreja, Jul 24 '20 at 19:38

score 1 · Accepted Answer · answered Jul 24 '20 at 19:37

1

Referring this I added the event listener to the parent ul for it to descend it to matching selector li.${liClass}

    $("ul").on('click', `li.${liClass}`, function() {
      console.log("Hello...");
    });

answered Jul 24 '20 at 19:37

Ravi Kukreja

627
1
8
17

Thanks a lot Ravi! That's it! So just to understand that: That solution before hasn't worked, because the event was bubbling its parents up till 'document' / root and was stopped by it's parent which prevented all click events from bubbling up. And with this solution the bubble only needs to go till 'ul' ? – Sagích dirnet Jul 24 '20 at 19:44
I tried and ``$(document).on(click`` works when I append something to the body by doing ````$('body').append(```` . I played around and click works when you apply it to the parent you appended to, which is ``ul`` in your case. – Ravi Kukreja Jul 24 '20 at 20:19

score 0 · Answer 2 · answered Jul 24 '20 at 18:59

The problem is you're appending those classes on keyup but you're putting those onclick outside of the fuction keyup and hence, they never get executed. Try this:

  //Add Live Search
  var currencies = ['EUR', 'USD', 'UK', 'UKA', 'PND', 'USA'];
  addLiveSearchToElement($('#currency-filter'), currencies, 'change-currency');


  function addLiveSearchToElement(ele, arr, liClass){ 
    ele.keyup(function(){
        //Get ul-list
        let list = $( this ).next();
        //Store User input
        let input = $( this ).val();
        list.empty();
        $.each(arr, function(i, value) {
          if(input != ''){
              if(value.toLowerCase().indexOf(input.toLowerCase()) != -1){
                list.append(`<li class="${liClass}"> ${arr[i]} </li>`);
              }
          } else {
              list.append(`<li class="${liClass}"> ${ value } </li>`);
          }
        });
          if(liClass != ''){
        console.log("Doin it");
        $(document).on('click', `li.${liClass}`, function() {
          console.log("Hello...");
        });
      }
    });

   
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="position-relative bg-white border-left d-flex  align-items-center p-2 border-right nav-drop-down no-select">
          <span class="u">USD</span> <span class="mr-2">Currency</span>
          <div class="position-absolute drop-down-list bg-white border">
            <input id="currency-filter" class="form-control live-search input" placeholder="Filter..." />
            <ul class="list-unstyled list-dropdown">
              <li>
                Item 1
              </li>
              <li>
                Item 2
              </li>
            </ul>
          </div>

Thanks for the fast answer, but unfortunately i forgot one code-part which is causing the issue. The underlaying div has in it's click event the function call to stopPropagation, which is need that the drop down list is not toggling by clicking menu items. - i updated the code — Sagích dirnet, Jul 24 '20 at 19:03

li click listener not triggering because of underlaying div with e.stopPropagation

2 Answers2