jQuery mouseenter和mouseleave函數爲ajax調用div

我已經調用4 div使用ajax在div class = displaycat。我爲這些div提供了一個mouseenter和mouseleave jquery函數，但它不起作用。代碼如下。如果是這些代碼格在了頁面AJAX調用它的工作原理，但不使用jQueryjQuery mouseenter和mouseleave函數爲ajax調用div

<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>'; 
    } 
?>

來源

2013-11-20 Asim Naseer

我不明白你想說什麼... – Techsin

請看現在的代碼 –

不要創建與多個div相同的ID - 這不是合法的HTML。 $('.catdiv div').hide()

：使用一個類來代替（如 .classdiv）

使用$('.displaycat').on('mouseenter', '.catdiv', ...)註冊一個委託事件處理程序，將工作在動態添加元素

你complete處理程序可以被替換

來源

2013-11-20 18:56:24 Alnitak

jQuery mouseenter和mouseleave函數爲ajax調用div

回答

相關問題