將鼠標懸停在生成的動態鏈接上

-1

我想創建一個類似於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(); 
    }); 
});

但它不工作。看起來像我的選擇器是問題。我怎樣才能正確選擇它？

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

來源

2013-11-01 newbie

你能發佈你的html嗎？ – dax

你可以做jsFidle的例子嗎？ – Khamidulla

@DhavalMarthak它作爲'append'可以取得'jquery object'的參數沒有問題，參見http://api.jquery.com/append/ –

如果是動態創建的，你必須使用委託

來源

2013-11-01 07:55:47 SarathSprakash

我試過你的方法，但仍然無法正常工作。 – newbie

它應該完美地工作，保持上面的代碼在$（document）.on（'submit'，'＃pop-form'）之外 – SarathSprakash

是的，我確實在外部添加了它，但它不工作。 – newbie

使用CSS。

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

E> f匹配任何F元素，其爲元素E.的子 E：用戶在懸停匹配Ë懸停E.

所以，E：懸停> F裝置，雖然用戶懸停E，適用規則F.

嘗試在這裏http://jsfiddle.net/7bVTj/

來源

2013-11-01 08:06:04

我不明白我該如何使用它。對不起，我是網絡開發新手。包括CSS。這就是爲什麼我使用引導 – newbie

這粘貼到你的樣式表CSS文件，而不是追加和刪除您標籤，只需用您的服務器的應用程序生成的，並追加到每一個環節。它將隱藏在文檔準備好的狀態下，並且即使在DOM更改後也會在懸停時顯示。 –

+0

在這項工作之前，我必須將添加到鏈接嗎？ – newbie

0

試試這個代碼

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

來源

2013-11-01 08:53:43 Grundy

將鼠標懸停在生成的動態鏈接上

回答

相關問題