javascript - 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 代码，最终会显示 map 。我该如何添加它？

更新

这可能是一个解决方案:

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

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

Answer 1

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

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