2017-07-25 20 views
0

Mein Problem wird nicht erwartet, wie auf li die Jquery onhover Trigger anonyme Funktion. meine HTML-Struktur istjquery auf dem Hover funktioniert nicht auf Bootstrap-Strukturansicht

$(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>

aber onhover von li die Jquery Funktion nicht auslöst, nachdem Ajax meine HTML-Struktur wie diese

<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>

werden antworten aber jquer y ist nicht Auslösung onhover Funktion

Antwort

0

Bitte versuchen Sie dieses

   
 
$("#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

dankt es figuered aus. kann ich fragen, warum auf Hover nicht funktioniert, während Mouceover tut? irgendeine Logik spezifiziert hier? –

1

für schwebende Onclick ist nicht richtig, Mouseover-Ereignis ist richtig

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

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

})