追加された要素にクラスを追加する

Question

jQuery ajax呼び出しを実行した後にhtmlに追加されたliタグにCSSクラスを追加しようとしています。目的は、追加されたli要素にマウスカーソルがあるときに左の境界線を追加し、マウスがli要素を離れるときに境界線を削除することです。ただし、コードは実行されず、境界線はliタグに追加されません。

私の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'); 
    }); 
}); 

マイCSS：

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

この問題に対処する方法が本当にわかりません。

ありがとうございます。

Answer 1

おそらく、動的に追加された要素のイベントをリッスンするには、onメソッドを使用する必要があります。 @junkfoodjunkieが言うように要素の上にマウスを移動するスタイルを適用する便利なCSSタグがすでに存在するため

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

もかかわらず、あなたが提案されている技術は、オーバー複雑に完全に実行可能な少しです。簡単な例については、http://www.w3schools.com/cssref/sel_hover.aspを参照してください。