Hinzufügen von Klassen zu angehängten Elementen

Question

Ich versuche, eine CSS-Klasse zu li-Tag hinzuzufügen, die nach dem Ausüben von jQuery ajax call an html angehängt wurde. Das Ziel besteht darin, dem angehängten li-Element einen linken Rand hinzuzufügen, wenn sich der Mauszeiger über diesem Element befindet, und den Rand zu entfernen, wenn der Mauszeiger das li-Element verlässt. Der Code wird jedoch nicht ausgeführt, und dem li-Tag wird kein Rahmen hinzugefügt.

Meine jQuery:

$(document).ready(function() { 
    $("#searchButton").on('click', function() { 
    var searchValue = $('.form-control').val(); 
    var urlVar = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchValue + "&format=json&callback=?"; 
    $.ajax({ 
     type: "GET", 
     url: urlVar, 
     contentType: "json", 
     async: false, 
     dataType: "json", 
     success: function(searchData) { 
     $('#output').html(" "); 
     for (var i = 0; i < searchData[1].length; i++) { 
      $('#output').prepend(searchData[1][i] + '<li id="listItems"><a href=' + searchData[3][i] + '>' + searchData[2][i] + '</a></li>'); 
      $('#output a').attr('target', '_blank') 
     } 
     }, 
     error: function() { 
     alert("Something is off, man!!!") 
     } 
    }); 
    }); 
    $('#listItems').mouseenter(function() { 
    $(this).addClass('listFormat'); 
    }); 
    $('#listItems').mouseleave(function() { 
    $(this).removeClass('listFormat'); 
    }); 
}); 

Meine CSS:

listFormat { 
border-left: 5px black solid; 
} 

einfach wirklich nicht sicher, wie dieses Problem zu beheben.

Vielen Dank.

Answer 1

Schnelle Antwort ist wahrscheinlich, dass für die Überwachung von Ereignissen auf dynamisch hinzugefügte Elemente die Methode on verwendet werden muss.

$('#listItems').on('mouseenter', function() { 
    $(this).addClass('listFormat'); 
    }); 
    $('#listItems')on('mouseleave', function() { 
    $(this).removeClass('listFormat'); 
    }); 

Auch wenn es, wie @junkfoodjunkie sagt, die Technik, die Sie vorschlagen, ist durchaus lebensfähig, aber ein wenig zu kompliziert, weil es bereits ein nützlicher CSS-Tag, das einen Stil, wenn die Maus über ein Element bewegt gelten. Ein schnelles Beispiel finden Sie in http://www.w3schools.com/cssref/sel_hover.asp.