在標籤上點擊調用jQuery函數

Question

我有一個Google即搜樣式的jQuery搜索腳本，它使用標籤爲用戶定義他們想要使用的搜索類型。但是，當用戶搜索某物然後選擇一種新的搜索類型（單擊一個選項卡）時，他們必須轉到文本框並按Enter鍵以再次提交查詢。

建議我在點擊其中一個選項卡時調用loadurl()函數，但是如何才能做到這一點併爲正確的選項卡加載正確的內容？我希望你能理解我想要描述的東西。

我當前的jQuery代碼是：

$(document).ready(function() { 
    function loadurl() { 
     $.ajax({ 
      type: 'GET', 
      url: url, 
      dataType: 'html', 
      success: function (results) { 
       $('results').html(results); 
      } 
     }); 
    } 
    $('[id^=type_]').click(function() { 
     type = this.id.replace('type_', ''); 
     $('[id^=type_]').removeClass('selected'); 
     $('#type_' + type).addClass('selected'); 
    }); 
    $('#type_search').click(); 
    $('input').keyup(function() { 
     query = $(this).val(); 
     url = '/' + type + '/' + query + '/'; 
     window.location.hash = '' + type + '/' + query + '/'; 
     document.title = $(this).val() + ' - My Search Script'; 
     $('results').show(); 
     if (query == '') { 
      window.location.hash = ''; 
      document.title = 'My Search Script'; 
      $('results').hide(); 
     } 
     loadurl(); 
    }); 
}); 

我當前的HTML代碼：

<div id='nav'> 
<a id='type_search'>All</a> 
<a id='type_images'>Images</a> 
<a id='type_videos'>Videos</a> 
<a id='type_news'>News</a> 
<a id='type_social'>Social</a> 
</div> 
<input type='text' autocomplete='off'> 

<div id='results'></div> 

Answer 1

觸發只要選擇任何選項卡中的input箱keyup事件。如果你想要，你也可以檢查當前選中的標籤是否被點擊，不要做任何事情只是返回。

$(document).ready(function() { 
    function loadurl() { 
     $.ajax({ 
      type: 'GET', 
      url: url, 
      dataType: 'html', 
      success: function (results) { 
       $('#results').html(results); 
      } 
     }); 
    } 

    $('[id^=type_]').click(function() { 
     type = this.id.replace('type_', ''); 
     $('[id^=type_]').removeClass('selected'); 
     $('#type_' + type).addClass('selected'); 
     $('input').trigger('keyup'); 
    }); 

    $('#type_search').click(); 

    $('input').keyup(function() { 
     query = $(this).val(); 
     if(!query) 
      return; 
     url = '/' + type + '/' + query + '/'; 
     window.location.hash = '' + type + '/' + query + '/'; 
     document.title = $(this).val() + ' - My Search Script'; 
     $('#results').show(); 
     if (query == '') { 
      window.location.hash = ''; 
      document.title = 'My Search Script'; 
      $('#results').hide(); 
     } 
     loadurl(); 
    }); 

});