Question

我想创建一个类似于jQuery中的示例here的悬停。但链接是动态生成的所以我真的很难搞清楚这一点。

我试过了：

$(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();
    });
});

但它不起作用。好像我的选择器就是问题所在。我该如何正确选择？

更新：

如果创建了选项卡，则此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＆gt; F匹配作为元素E的子元素的任何F元素。 E：在用户悬停期间将鼠标悬停在E上。

所以，E：hover＆gt; 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

的代码

悬停在生成的动态链接上

3 个答案: