Appended li element cannot be accessed

Question

I've appended a row of li elements from an JSON file with this code:

  //Load Level 1 
  $.ajax({
    url:'Anlagenliste.json',
    dataType: 'json',
    type: 'get',
    cache: false,
    success: function(data){
          $(data.Level1).each(function(index, value) {
            $(".level1 ul").append('<a href="'+value.url+'"><li>' + value.name + '</li></a>');
      });//end each
    }//end success
  });//end ajax

This elements are some elements of my sidebar. I want to get the text if I mouseover the specific li element. With this code:

  //Get text of li element
  $('.level1 li').mouseover(function() {
    var cursel = $(this).text();
    console.log(cursel);
  });//end mouseover

If I hover over the li elements I don't get any text in the console. If I remove the "li" part of the ".level1 li" I get all of the li elements.

Why doesn't it work with ".level1 li"?

Why doesn't it exist when mouseover is executed? I'm new in Jquery... — Daniel I., Mar 20 '18 at 18:23

score 0 · Answer 1 · answered Mar 20 '18 at 18:27

You'll want to change the way you bind the function to the li, it needs to be dynamic like this:

//Get text of li element
  $('<higher-element>').on('mouseover', '.level1 li', function() {
    var cursel = $(this).text();
    console.log(cursel);
  });//end mouseover

Appended li element cannot be accessed

1 Answers1