jQuery mouseenter和mouseleave函数，用于一个名为div的ajax

Question

我在class=displaycat的div中使用ajax调用了4个div。我为这些div编写了一个mouseenter和mouseleave jquery函数，但它不起作用。代码如下。如果是在没有ajax调用的页面中对这些div进行编码，它可以工作，但不能与jquery 一起工作

<div id="cat">
   <h1>CATEGORIES</h1>
   <div class="displaycat" align="center">
   </div>
</div>
<script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                type: "POST",
                url:"function/mpslidercm.php",
                data: ({action : "catmenu",
                         w : $('.displaycat').width()}),
                success: function(data){
                    $('.displaycat').html(data);
                },
                complete: function(){
                    $('div#catdiv').each(function(){$('div', this).hide();});
                }
    });
    $('div#catdiv').mouseenter(function(){var submenu = 0;var text = $('img', this).attr('data-description');if (text === 'clothes'){submenu = '<p>CLOTHES</p><ul><li><a href="#">Shirts</a></li><li><a href="#">Pants</a></li><li><a href="#">Scarfs</a></li><li><a href="#">trousers</a></li></ul>';}else if (text === 'shoes'){submenu = '<p>SHOES</p><ul><li><a href="#">Party</a></li><li><a href="#">Fancy</a></li><li><a href="#">High Heals</a></li><li><a href="#">Sandels</a></li></ul>';} else if (text === 'bags'){submenu = '<p>BAGS</p><ul><li><a href="#">Gucci</a></li><li><a href="#">LV</a></li><li><a href="#">Chines</a></li><li><a href="#">Copy</a></li></ul>';} else if (text === 'access'){submenu = '<p>Accessories</p><ul><li><a href="#">Jewlery</a></li><li><a href="#">Bangels</a></li><li><a href="#">Braclets</a></li></ul>';}$(this).css('color', '#FFF');$(this).css('background-color', '#D63232');$('img', this).hide();$(this).height(200);$(this).width(320);$('div', this).text('');$('div', this).html(submenu);$('div', this).show();});
    $('div#catdiv').mouseleave(function(){$(this).css('padding', '0px');$(this).css('color', '');$(this).css('background-color', '');$(this).height(200);$(this).width(320);$('div', this).hide();$('img', this).show();});
});
</script>

这是我的ajax调用php文件

<?php
    $action = $_POST['action'];
    $w= $_POST['w'];
    if ($action == 'catmenu')
    {
        $divsize = $w%2;
        if ($divsize == 0)
        {
            $w -= 10;
            $divsize = $w/4;
        } else {
            $w -= 9;
            $divsize = ($w-1)/4;
        }
        echo'<div id="catdiv"><img src="imgresize.php?src=resources/img/model2.png&w='.$divsize.'&h=200" data-description="clothes" /><div>Test</div></div>
        <div id="catdiv"><img src="imgresize.php?src=resources/img/shoes.jpg&w='.$divsize.'&h=200" data-description="shoes" /><div>Test1</div></div>
        <div id="catdiv"><img src="imgresize.php?src=resources/img/bag.jpg&w='.$divsize.'&h=200" data-description="bags"/><div>Test2</div></div>
        <div id="catdiv"><img src="imgresize.php?src=resources/img/acces.jpg&w='.$divsize.'&h=200" data-description="access"/><div>Test3</div></div>';
    }
?>

Answer 1

1. 不要用相同的ID创建多个div——这不是合法的HTML。使用类（例如.classdiv）

2. 使用$('.displaycat').on('mouseenter', '.catdiv', ...)注册委派的事件处理程序，该处理程序将处理动态添加的元素

3. 您的complete处理程序可以替换为：$('.catdiv div').hide()