Hover on dynamic link generated

Question

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

@DhavalMarthak It has no problem as `append` can take a parameter of `jquery object` see http://api.jquery.com/append/ — Rohan Kumar, Nov 01 '13 at 07:56
@newbie see [Jquery On](http://api.jquery.com/on/), I think that you do not use it correctly — Grundy, Nov 01 '13 at 08:46

SarathSprakash · Accepted Answer · 2013-11-01T09:17:25.870

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

edited Nov 01 '13 at 09:17

answered Nov 01 '13 at 07:55

SarathSprakash

4,614
2
19
35

It should work perfectly, keep the above code outside of $(document).on('submit','#pop-form') – SarathSprakash Nov 01 '13 at 08:10
@newbie try this, I have updated the answer, its working for me. Hover is actually a combination of mouseenter and mouse leave, but you cant use hover as a delegate event, So you have to use both seperately – SarathSprakash Nov 01 '13 at 08:53
Is that suppose to be .remove()? – newbie Nov 01 '13 at 09:01
you just paste the above code instead of hover , and please repond – SarathSprakash Nov 01 '13 at 09:06
Its working if you replace the mouseleave with this `$(document).on('mouseleave', 'a.g-tabs', function() { $( this ).find( ".icon-clear-remove:last" ).remove(); });`, please update your answer before I accept it. – newbie Nov 01 '13 at 09:14
@newbie updated, well i just checked the working of mouseover and mouseleave, not the contents – SarathSprakash Nov 01 '13 at 09:17
Can you help me with my one more problem. Its regarding with displaying PDFs? Please reply then I'll accept it regarding of what your answer. – newbie Nov 01 '13 at 09:28
Ok you can tell me,what is the problem with pdf?, Then my updated answer is correct only , you asked for hover issue I solved it,but I didn't code for what to do on mouseleave – SarathSprakash Nov 01 '13 at 09:31
This is my team mate [post](http://stackoverflow.com/questions/19681933/embed-pdf-in-webpage?noredirect=1#comment29276755_19681933). Please help us and thanks in advance. – newbie Nov 01 '13 at 09:45

Anatoliy Gusarov · Answer 2 · 2013-11-01T09:44:46.613

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/

edited Nov 01 '13 at 09:44

answered Nov 01 '13 at 08:06

Anatoliy Gusarov

797
9
22

I don't get it how can I use this. Sorry I'm new to web development. Including CSS. That is why I'm using bootstrap – newbie Nov 01 '13 at 08:07
paste this to your stylesheet css file, and instead of append and remove your tag, just generate it with your server app, and append to every link. it will be hidden on document ready, and will be shown on hover even after DOM change. – Anatoliy Gusarov Nov 01 '13 at 08:11
I can't make it work because I have this in my CSS `.icon-clear-remove { background-image: url(../img/clear.png); background-position: center center; }` – newbie Nov 01 '13 at 08:30
it should not interfere and should work. If not - teach materiel. – Anatoliy Gusarov Nov 01 '13 at 08:49
It seems the icon is not working if I replace my `.icon-clear-remove` to `.icon-clear-remove:before`. I don't know why the .png image doesn't show up. – newbie Nov 01 '13 at 08:55
You don't need `.icon-clear-remove:before`, it's just an example. will now edit and explain my answer. – Anatoliy Gusarov Nov 01 '13 at 09:40

score 0 · Answer 3 · edited May 23 '17 at 11:50

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

edited May 23 '17 at 11:50

Community

1
1

answered Nov 01 '13 at 08:53

Grundy

13,356
3
35
55

Hover on dynamic link generated

3 Answers3