點擊時生成的標籤元素上觸發提示

我有一個動態生成的一些HTML：點擊時生成的標籤元素上觸發提示

<label class="passiveText smallText" title="Name: Smith, John , Occupation Code: BA81, Occupation 
Description: BUSINESS SYSTEMS M" rel="tooltip" style="margin-top:10px; width:80%; text-decoration:underline; 
color:#009245;" containeridx="0" id="lblBadge_7022_0">7022</label>

現在我有一個jQuery函數，單擊時作出提示出現：

$(function() 
{ 
    var targets = $('[rel~=tooltip]'), 
     target = false, 
     tooltip = false, 
     title = false; 
    targets.bind('click', function() 
    { 
    target = $(this); 
    tip = target.attr('title'); 
    tooltip = $('<div id="tooltip"></div>'); 

    if(!tip || tip == '') 
     return false; 

    tooltip.css('opacity', 0) 
      .html(tip) 
      .appendTo('body'); 

    var init_tooltip = function() 
    { 
     if($(window).width() < tooltip.outerWidth() * 1.5) 
      tooltip.css('max-width', $(window).width()/2); 
     else 
      tooltip.css('max-width', 340); 

     var pos_left = target.offset().left + (target.outerWidth()/2) - (tooltip.outerWidth()/2), 
      pos_top = target.offset().top - tooltip.outerHeight() - 20; 

     if(pos_left < 0) 
     { 
      pos_left = target.offset().left + target.outerWidth()/2 - 20; 
      tooltip.addClass('left'); 
     } 
     else 
      tooltip.removeClass('left'); 

     if(pos_left + tooltip.outerWidth() > $(window).width()) 
     { 
      pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth()/2 + 20; 
      tooltip.addClass('right'); 
     } 
     else 
      tooltip.removeClass('right'); 

     if(pos_top < 0) 
     { 
      var pos_top = target.offset().top + target.outerHeight(); 
      tooltip.addClass('top'); 
     } 
     else 
      tooltip.removeClass('top'); 

     tooltip.css({ left: pos_left, top: pos_top }) 
       .animate({ top: '+=10', opacity: 1 }, 50); 
    }; 

    init_tooltip(); 
    $(window).resize(init_tooltip); 

    var remove_tooltip = function() 
    { 
     tooltip.animate({ top: '-=10', opacity: 0 }, 50, function() 
     { 
      $(this).remove(); 
     }); 

     target.attr('title', tip); 
    }; 

    //target.bind('mouseleave', remove_tooltip); 
    tooltip.bind('click', remove_tooltip); 
});

}） ;

它沒有做的就是像我想要的那樣切換。我想要的是當工具提示啓動時，再次點擊我想讓工具提示消失。

我該如何做到這一點？

來源

2014-02-20 David Tunnell

您可能需要使用'。對（）'這代表點擊操作的家長選擇。通過這種方式，您不需要解除綁定，因爲稍後添加的項目也會被委派。 –

你能爲此創建一個小提琴嗎？ – j08691

它看起來像你的代碼原樣：http://jsfiddle.net/HSpyC/什麼似乎沒有工作？ –

這裏是我的解決方案，我想通了：

$(function() { 
    var targets = $('[rel~=tooltip]'); 

    targets.on('click', function() { 
     var $this = $(this); 
     var tooltip = $this.children('#tooltip'); 

     if (tooltip.length > 0) { 
      tooltip.remove(); 

      return true; 
     } 

     tooltip = $('<div id="tooltip">'); 
     tooltip.text($this.attr('title')); 

     var init_tooltip = function() { 
      if ($(window).width() < tooltip.outerWidth() * 1.5) 
       tooltip.css('max-width', $(window).width()/2); 
      else 
       tooltip.css('max-width', 340); 

      var pos_left = $this.offset().left + ($this.outerWidth()/2) - (tooltip.outerWidth()/2), 
          pos_top = $this.offset().top - tooltip.outerHeight() - 20; 

      if (pos_left < 0) { 
       pos_left = $this.offset().left + $this.outerWidth()/2 - 20; 
       tooltip.addClass('left'); 
      } 
      else 
       tooltip.removeClass('left'); 

      if (pos_left + tooltip.outerWidth() > $(window).width()) { 
       pos_left = $this.offset().left - tooltip.outerWidth() + $this.outerWidth()/2 + 20; 
       tooltip.addClass('right'); 
      } 
      else 
       tooltip.removeClass('right'); 

      if (pos_top < 0) { 
       var pos_top = $this.offset().top + $this.outerHeight(); 
       tooltip.addClass('top'); 
      } 
      else 
       tooltip.removeClass('top'); 

      tooltip.css({ left: pos_left, top: pos_top }) 
        .animate({ top: '+=10', opacity: 1 }, 50); 
     } 
     init_tooltip(); 
     $(window).resize(init_tooltip); 

     $this.append(tooltip); 
    }); 
});

來源

2014-02-20 22:45:55

點擊時生成的標籤元素上觸發提示

回答

相關問題