2017-07-25 29 views
0

我的問題並不在於li上的jquery onhover觸發匿名函數。我的HTML結構jquery on hover無法在引導樹視圖上工作

$(document).ready(function() { 
 
     $.ajax({ 
 
      url: "fetch.php", 
 
      method: "POST", 
 
      dataType: "json", 
 
      success: function (data) { 
 
       $('#treeview').treeview({data: data}); 
 
      } 
 
     }); 
 

 
    }); 
 
    $("#treeview").on('click','.list-group', function() { 
 
// \t \t var t = $(this).find('li'); 
 
     alert('here'); 
 
     console.log($(this));
<div class="container" style="width:900px;"> 
 

 
    <div id="treeview"> 
 

 
    </div> 
 
</div>

但李的onhover jQuery函數不觸發 AJAX響應我的HTML結構變成這個樣子

<div id="treeview" class="treeview"> 
 
\t <ul class="list-group"> 
 
\t \t <li class="list-group-item node-treeview node-selected" data-nodeid="0" style="color:#FFFFFF;background-color:#428bca;"><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>USA</li> 
 
\t \t <li class="list-group-item node-treeview" data-nodeid="13" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>Canada</li> 
 
\t \t <li class="list-group-item node-treeview" data-nodeid="20" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>Australia</li> 
 
\t </ul> 
 
</div>

後但是jquer y不觸發onhover功能

回答

0

請試試這個

   
 
$("#treeview").on('mouseover','.list-group-item', function() { 
 
         console.log($(this).html()); 
 
}); 
 
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container" style="width:900px;"> 
 

 
     <div id="treeview" class="treeview"> 
 
    \t <ul class="list-group"> 
 
    \t \t <li class="list-group-item node-treeview node-selected" data-nodeid="0" style="color:#FFFFFF;background-color:#428bca;"><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>USA</li> 
 
    \t \t <li class="list-group-item node-treeview" data-nodeid="13" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>Canada</li> 
 
    \t \t <li class="list-group-item node-treeview" data-nodeid="20" style="color:undefined;background-color:undefined;"><span class="icon expand-icon glyphicon glyphicon-plus"></span><span class="icon node-icon"></span>Australia</li> 
 
    \t </ul> 
 
    </div> 
 
     </div>

+0

感謝您figuered出來。我可以問爲什麼懸停不工作,而mouceover呢?這裏指定的任何邏輯? –

1

爲的onclick徘徊是不正確的鼠標懸停事件是對

$("#treeview").on('mouseover','.list-group', function() { 

     alert('here'); 
     console.log($(this)); 

})