Наведите указатель мыши на динамическую ссылку

Question

Я хочу создать зависание, подобное примеру here в jQuery. Но ссылка динамически сгенерирована, так что мне действительно трудно понять это.

Я попытался это:

$(document).ready(function() { 
    $('a.g-tabs').on('hover', 'a', function() { 
      $(this).append($('<i class="icon-clear-remove" onClick="tabRemove();"></i>')); 
     }, 
     function() { 
      $(this).find(".icon-clear-remove:last").remove(); 
    }); 
}); 

Но ее не работает. Похоже, что мой селектор - проблема. Как я могу выбрать его правильно?

UPDATE:

Этот JS является ручки для представления, чтобы не обновить, если вкладка создается:

$(document).on('submit','#pop-form', function(e) { 
    // make an ajax request 
    $.post('../admin/FLT_add_tab.do', 
      $('#pop-form').serialize(), 
      function(data) { 
       // if data from the database is empty string 
       if($.trim(data).length != 0) { 
        // hide popover 
        $('#popover').popover('hide'); 
        //append new tab and new tab content 
        var id = $(".nav-tabs").children().length - 1; 
        $('#popover').closest('li').before('<li><a href="#tab_'+ id +'" data-toggle="tab" class="g-tabs">' + data + '</a></li>');   
        $('.tab-content').append('<div class="tab-pane" id="tab_' + id + '"> <c:import url="flt-pis.html"></c:import> </div>'); 
       } else { 
        // error handling later here 
       } 
      } 
    ); 
    e.preventDefault(); 
}); 

Не это один является HTML, который обрабатывает вкладки, если пользователь зайдет эта страница в первой раздаче:

<!-- Other tabs from the database --> 
<c:forEach var="tabNames" items="${ allTabs }"> 
    <li><a href="#" data-toggle="tab" class="g-tabs"> ${ tabNames.key }</a></li> 
</c:forEach> 

<!-- Add new tab --> 
<li><a href="#" id="popover">New <i class="icon-plus-sign"></i></a></li> 

Как просил код на стороне сервера:

@ResponseBody 
@RequestMapping(value = "/admin/FLT_add_tab", method = RequestMethod.POST) 
public String createNewTab(@RequestParam 
String newTab, HttpServletRequest request) 
{ 
    HttpSession session = request.getSession(); 
    String returnVal = Credentials.checkSession(session); 

    if(returnVal != null) 
    { 
     return returnVal; 
    } 

    String tabName = null; 
    try 
    { 
     DataSource dataSource = DatabaseCommunication.getInstance().getDataSource(); 
     QuestionnaireDAO qDAO = new QuestionnaireDAO(dataSource); 

     if(qDAO.getTabName(0, newTab) == null) 
     { 
      qDAO.insertQtab(newTab); 
       tabName = newTab; 
     } 
    } 
    catch(Exception e) 
    { 
     // no logger yet 
     e.printStackTrace(); 
    } 

    return tabName; 
} 

Answer 1

Если она динамически создается вы должны использовать делегат

  $(document).on('mouseenter', 'a.g-tabs', function() { 
        $(this).append($('<i class="icon-clear-remove" onClick="tabRemove();"></i>')); 
     }); 
    $(document).on('mouseleave', 'a.g-tabs', function() { 
     $(this).find(".icon-clear-remove:last").remove(); 
}); 

Answer 2

использования CSS.

.g-tabs a>.icon-clear-remove 
{ 
display:none; 
} 
.g-tabs a:hover>.icon-clear-remove 
{ 
display:inline-block; 
} 

E> F Совпадает любой элемент F, который является дочерним элементом Е. Е: парения Соответствует E во время пользователя парит Е.

Так, Е: парить> F означает, что при наведении E, применить правило F.

Попробуйте здесь http://jsfiddle.net/7bVTj/

Answer 3

попробуйте этот код

$('a.g-tabs').on({ 
    mouseenter: function() { 
     $(this).append($('<i class="icon-clear-remove" onClick="tabRemove();"></i>')); 
    }, 
    mouseleave: function() { 
     $(this).find(".icon-clear-remove:last").remove(); 
    } 
}, "a"); 

этот код от Is it possible to use jQuery .on and hover