jQuery：如何在 ajax 生成的标签选择上放置鼠标悬停事件

Question

在我的页面中，我有一个选择菜单：

<div class="div1" style="float: left">
        <strong>Cerca Prodotto</strong>
        <br/><br/>
        <form class="form">
                <div><input type="text" id="tags" value=""></div>
                <div>
                <img class="btnaggiungi" src="http://lainz.softwebsrl.it/img/carrello.jpg" alt="Aggiungi" id="add_newProduct"/>
                </div>
        </form>

</div>

由以下 jQuery 控制和生成：

$( "#tags" ).autocomplete({
        minLength: 2,
        source: function (request, response) {
            $.ajax({
                url: "http://lainz.softwebsrl.it/ajax/autocompletecibo",
                dataType: "json",
                crossDomain: true,
                type : 'post',
                data:
                {
                    valore: request.term,
                },
                success: function (data)
                {
                    response(data);
                    console.log(data);
                }
            });
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, data ) {
          var selezione = data.item.label;
          $.ajax({
                type : 'POST',
                url: "http://lainz.softwebsrl.it/ajax/autocompletecibolista/valore/"+selezione,
                dataType: "html",
                success: function(msg){
                    $(".div2").html(msg);
                },
                error: function()
                {
                    alert("Chiamata fallita, si prega di riprovare...1");
                }
            });
        }
    });

现在我需要在每个条目上添加一个鼠标悬停事件。我的意思是，当用户将鼠标放在列表的一个选项上时，还有一些其他的 js 代码要执行，最后会显示一个地图。如何添加？

更新

这可能是一个解决方案：

<script>
 $(document).on("mouseenter", "li", function() {
  $(".div5").show();
 });

 $(document).on("mouseleave", "li", function() {
  $(".div5").hide();
 });
</script>

Answer 1

您必须将事件绑定到静态元素，然后将其委托给动态生成的元素。我的意思是，如果<div class="div1"> 是您动态生成的 HTML 的容器，那么您必须执行以下操作：

$('.div1').on('mouseover','.div2 .dynamicallyGeneratedList',function(){
    console.log('do something');
})

Answer 2

你的问题并不完全。您的数据响应如何？也许这对你有帮助。

$(data).each(function() {
  var $li = $("<li>"+data+"</li>");
  $li.bind("mouseover", showMap);
  $("ul").append($li);      
});

function showMap() {
  // show map
}