2017-07-25 66 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)); 

})