将jQuery函数从“文档准备就绪”移动到“单击”事件

我有一个选项卡式布局，单击选项卡时显示/隐藏部分。我还有一个工具提示功能，当第一次加载页面时，当前在图像地图上加载工具提示。我想对此进行更改，以便工具提示仅在单击ID为2的选项卡（#section2）或该选项卡处于活动状态时显示（在链接到url的情况下？tab=2）。不过我在这件事上绊倒了。这是我的密码：

Tab click事件（显示基于Tab click的隐藏部分，或者如果将？Tab=X附加到URL：

    jQuery(document).ready(function($){
    var sections = $('.section').hide();

    $('.tablink').click(function(e){
        e.preventDefault();
        sections.hide();
        $($(this).attr('href')).show();
        $(this).closest('ul').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
    });

    var tab = getParameterByName('tab');
    if(tab)
       $('.tablink:eq('+(tab-1)+')').click();
    else
        $('#section1').show();  //show first section
});

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

我想做的是找出如何集成以下工具提示代码，以便在单击选项卡2时触发工具提示：

$("area[title='TITLE NAME']").addClass("active"); //adds active class to specified area

// Create the tooltips only when document ready
$(document).ready(function()
{

       $('area.active').qtip({
   show: {
      ready: true // Show on document load
   },
    position: {
      corner: {
         target: 'center',
         tooltip: 'topMiddle'
      },
      adjust: { x: 4, y: 5 }

   },
        style: {
            name: 'dark', 
            width: 180,
            padding: 3,
             textAlign: 'center',
            border: {
               width:1, 
               radius: 1,
               color: '#fdcf81'
            }, 
            tip: true 
         },
   api: {
      onRender: function(){
         var self = this;
         setTimeout(function(){ self.hide(); }, 50000); // Hide after a minute
      }
   }
});   
});
$("area").removeAttr("title");

以下是选项卡的HTML：

 <ul class="tablinks">
        <li id="tab1" class="active"><a class="tablink" href="#section1">One</a></li>
        <li id="tab2"><a class="tablink" href="#section2">Two</a></li>
  </ul>

正如您所看到的，这是当前在文档准备就绪时触发的。任何建议都是适当的。我的jQuery在这一点上都很差劲，因为我觉得这应该很容易

---

谢谢！

好的，我找到了部分解决方案。只是将工具提示功能嵌套在tab click事件中：

jQuery(document).ready(function($){
    var sections = $('.section').hide();

    $('.tablink').click(function(e){
        e.preventDefault();
        sections.hide();
        $($(this).attr('href')).show();
        $(this).closest('ul').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
               $('area.active').qtip({
   show: {
      ready: true // Show on document load
   },
    position: {
      corner: {
         target: 'center',
         tooltip: 'topMiddle'
      },
      adjust: { x: 4, y: 5 }

   },
        style: {

            width: 180,
            padding: 3,
             textAlign: 'center',
            border: {
               width:1, 
               radius: 1,
            }, 
            tip: true 
         },
   api: {
      onRender: function(){
         var self = this;
         setTimeout(function(){ self.hide(); }, 50000); 
      }
   }
});   
    });

    var tab = getParameterByName('tab');
    if(tab)
       $('.tablink:eq('+(tab-1)+')').click();
    else
        $('#section1').show();  //show first section



});

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

---

好的，我找到了部分解决方案。只是将工具提示函数嵌套在tab click事件中：

jQuery(document).ready(function($){
    var sections = $('.section').hide();

    $('.tablink').click(function(e){
        e.preventDefault();
        sections.hide();
        $($(this).attr('href')).show();
        $(this).closest('ul').find('li').removeClass('active');
        $(this).closest('li').addClass('active');
               $('area.active').qtip({
   show: {
      ready: true // Show on document load
   },
    position: {
      corner: {
         target: 'center',
         tooltip: 'topMiddle'
      },
      adjust: { x: 4, y: 5 }

   },
        style: {

            width: 180,
            padding: 3,
             textAlign: 'center',
            border: {
               width:1, 
               radius: 1,
            }, 
            tip: true 
         },
   api: {
      onRender: function(){
         var self = this;
         setTimeout(function(){ self.hide(); }, 50000); 
      }
   }
});   
    });

    var tab = getParameterByName('tab');
    if(tab)
       $('.tablink:eq('+(tab-1)+')').click();
    else
        $('#section1').show();  //show first section



});

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

---

重要提示：是的，即使单击事件也必须在就绪块内。否则，如果在脚本后加载DOM，则可能会破坏代码。我今天通过艰苦的学习了解到了这一点。作为练习，我将始终将事件放在文档就绪块内以确保

$(document).ready(function() 
{
    $("#your_element").click(function(e)
    {
        // safe code goes here
    });
}

---

重要提示：是的，即使单击事件也必须在就绪块内。否则，如果在脚本后加载DOM，则可能会破坏代码。我今天通过艰苦的学习了解到了这一点。作为练习，我将始终将事件放在文档就绪块内以确保

$(document).ready(function() 
{
    $("#your_element").click(function(e)
    {
        // safe code goes here
    });
}