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

我在div中使用ajax调用了4div，其class=displaycat。我为这些div编写了mouseenter和mouseleave jquery函数，但它不起作用。代码如下。如果在页面中编写这些div而不使用ajax调用，那么它可以工作，但不使用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>

类别
$（文档）.ready（函数（）{
$.ajax({
类型：“POST”，
url:“function/mpslidercm.php”，
数据：（{操作：“catmenu”，
w:$（'.displaycat'）.width（）}），
成功：功能（数据）{
$（'.displaycat'）.html（数据）；
},
完成：函数（）{
$（'div#catdiv'）.each（function（）{$（'div'，this.hide（）；}）；
}
});
$（'div#catdiv'）.mouseenter（function（）{var submenu=0；var text=$（'img'，this）.attr（'data-description'）；if（text=='costs'）{submenu='costs
costs
.else如果（text=='shoes'）{submenu='shoes
<
<
<
<
<
<
<
<<

这是我的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>';
    }
?>

不要创建具有相同ID的多个div-这不是合法的HTML。请改用类（例如

.classdiv

）

使用（'mouseenter'，'.catdiv'，…）上的

$（'.displaycat'）.on

注册委托事件处理程序，该处理程序将处理动态添加的元素

您的

完整处理程序可以替换为：
$（'.catdiv'）.hide（）

---

我不明白你想说什么…现在请看代码