Question

$("#id").tooltip({ 
        effect: "slide", 
        tip: '.tooltip' 
    });

我想删除此代码创建的对象。

“flowplayer jquery tools”插件

这个问题在我的帖子底部有一个答案！

如果你不想浪费时间，请查看底部

---------- ---------- UPDATE

那应该是这样的

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
    <title>jQuery tooltip</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

    <script type="text/javascript">


/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/
    $(document).ready(function() {
        $("#_2").tooltip({ 
            effect: "slide", 
            tip: '.tooltip' ,
            position: 'bottom center'
        }); 

    });
/******* THIS FUNCTION IS JUST FOR TEST, REMOVE IT LATER *********/




/** The code below is not working as I expect, it doesn't MOVE tooltip **/

           var old_id;

    //first time - create tooltip
        function my_create(id){
            $("#"+id).tooltip({ 
                effect: "slide", 
                tip: '.tooltip', 
                position: 'bottom center'
            });     
        }

     //next times - move tooltip to other element
        function my_unlink(id){
            $("#"+id).unbind("mouseover"); 
            //todo
        }

        function my_link(id){
            //todo
        }


        //THE MAIN FUNCTION

        function do_tip(new_id){
            if(old_id){
                my_unlink(old_id);
                my_link(new_id);
                alert(new_id);
            }
            else
                my_create(new_id);

            old_id=new_id;
         //new_id.focus();
     } 

    </script> 

  <style>
    .tooltip {
      display: none;
      background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
      font-size:14px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff;   
    }
    h1 {
      width: 400px;
      text-align: center;
      background-color: yellow;
    }

  </style>
</head>
<body>

    <h1 onclick="do_tip(this.id)" id="_1">John</h1>
    <h1 onclick="do_tip(this.id)" id="_2">Mary</h1>
    <h1 onclick="do_tip(this.id)" id="_3">Dan</h1>
    <h1 onclick="do_tip(this.id)" id="_4">Paul</h1>
    <h1 onclick="do_tip(this.id)" id="_5">Kim</h1>

    <div class="tooltip">There should be only one tooltip on a page!</div>

</body></html>

---------更新2 ----------

这是答案

Linking/unlinking jquery object to an element

这个长篇故事的寓意是：

我一直认为这是一个常见的问题，而不是代码或插件特定的问题。我认为解决方案应该像“破坏旧的工具提示对象然后创建一个新的，附加到其他元素”一样简单

Answer 1

您写下要删除代码创建的对象。

代码的作用是首先在页面中搜索ID为“ID”的元素，让我们称之为“触发器”。

我在这里改变代码中的一件事：而不是通过id'ID'选择触发器我选择使用'do_tooltip_for_this'这个类。这样我就可以设置一个工具提示一次多个触发器。

如果用户将鼠标移到触发器上，则为“工具提示”类的元素已存在于页面中，将显示并定位在该触发器附近。如果用户将鼠标从触发器移开，则该元素将再次自动隐藏。这也适用于多个触发器，重复使用相同的工具提示。

您也可以通过编写

手动隐藏工具提示

  $('.tooltip').hide();

您可以通过编写

来禁用整个行为

$(".do_tooltip_for_this").unbind("mouseover");

以下是整个代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>

    <title>jQuery tooltip</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

    <script type="text/javascript">
      var o;
    $(document).ready(function() {

    o = $(".do_tooltip_for_this").tooltip({ 
        effect: "slide", 
        tip: '.tooltip' ,
        position: 'bottom center'
    }); 
                  
    });
  </script> 
  <style>
    .tooltip {
      display: none;
      background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow_bottom.png);
      font-size:12px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff;   
    }
    h1 {
      width: 400px;
      text-align: center;
      background-color: yellow;
    }

  </style>
</head>
<body>

    <h1 title="a tooltip regarding John" class="do_tooltip_for_this">This is John</h1>
    <h1 title="a tooltip regarding Paul" class="do_tooltip_for_this">This is Paul</h1>
    <h1 title="a tooltip regarding George" class="do_tooltip_for_this">This is George</h1>
   <h1 title="a tooltip regarding Ringo" class="do_tooltip_for_this">This is Ringo</h1>

    <div class="tooltip"></div>

</body></html>

Answer 2

如何使用它：

delete (object_here);

这将删除javascript对象。

Answer 3

通过使用jQuery，您可以使用.remove()

$("#id").remove(); // will remove element with an id of 'id'

<强> EDITED

适合某人here。它也可能对你有用。

// unbind focus and mouseover to cover all the bases just 
  // incase the tooltip is not being applied to an input 
  $("#id").unbind("focus"); 
  $("#id").unbind("mouseover");

Answer 4

取决于。如果你对.remove()这样的东西，它实际上从页面中删除了具有该ID的整个元素。

如果您只想从中删除工具提示，请查看您正在使用的插件。通常插件提供了一个destroy选项（jQuery UI提供的对话框就是这样）。

除非您愿意从页面中删除整个元素然后重新创建它，否则核心库中没有任何内容可以做到这一点。如果你想给这个方法一个去，这会让你朝着正确的方向前进：

$('#id').replaceWith($('#id').clone());

默认情况下，.clone不会复制绑定到元素的事件和数据，因此应该是一种删除工具提示的脏方法。但同样，看看你的插件是否有任何内置的清理方法。

Answer 5

$("#id").tooltip({});

你试过吗？

Answer 6

$("#id").removeData('tooltip');

如何在运行时删除jquery对象？

6 个答案: