-1

I want to create a hover similar to the example here in the jQuery. But the link is dynamically generated so I'm really having a hard time figuring this out.

I tried this:

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

But its not working. Seems like my selector is the problem. How can I select it properly?

UPDATE:

This JS is handles for the view to not refresh if the tab is created:

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

Not this one is the HTML that handles the tabs if the user goes to this page in first hand:

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

As requested the server side code:

@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;
}
4

3 回答 3

1

If it is dynamically created the you have to use the delegate 

         $(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();
 });
于 2013-11-01T07:55:47.310 回答
0

use CSS.

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

E > F Matches any F element that is a child of an element E. E:hover Matches E during user hovers E.

So, E:hover>F means that while user hovers E, apply rule to F.

Try it here http://jsfiddle.net/7bVTj/

于 2013-11-01T08:06:04.843 回答
0

try this code

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

this code from Is it possible to use jQuery .on and hover

于 2013-11-01T08:53:43.410 回答