JQuery列表，防止鏈接被點擊一次以上

Question

我一直在試圖找出這一個現在一段時間。我有一個使用JSon數組填充的JQuery列表。

列表中的每個項目都是可點擊的，並帶有一個稱爲詳細信息的頁面，其中包含所點擊項目的具體詳細信息。

一切工作正常，但如果用戶在項目鏈接上單擊幾次，該頁面將正確加載，但它會需要點擊幾下後退按鈕才能返回到原始頁面。比方說，用戶點擊一個物品3次，當他想回去時，他必須回擊3次。

所以我正在尋找一種方法來禁用鏈接後，點擊一次。

我怎麼能做到這一點？

下面的大代碼示例，請告訴我，如果我的問題不清楚。謝謝 ！

var items = []; 


$.each(catalog.products, 
     function(index, value) { 

      if (
        ((!filterValue) || value.name.toUpperCase().indexOf(filterValue.toUpperCase()) != -1) 
          && ((!brand) || value.brand.toUpperCase().indexOf(brand.toUpperCase()) != -1) 
          && ((!category) || value.category.toUpperCase().indexOf(category.toUpperCase()) != -1) 
          && ((!sport) || value.sport.toUpperCase().indexOf(sport.toUpperCase()) != -1) 
       ) { 

       var priceInfo; 
       if(value.salePrice === '') { 
        priceInfo = '<h4 style="margin-top:3px;margin-bottom:0px;color:#75a8db "> $' + value.price + '</h4></a></li>'; 
       } else { 
        priceInfo = '<h4 style="margin-top:3px;margin-bottom:0px; "><span style="text-decoration: line-through;font-size:small;">$' + value.price + 
          '</span><span style="color:#75a8db;"> $' + value.salePrice + '</span></h4></a></li>'; 
       } 

       items.push('<li id="' + index + '">' + 
         '<a data-identity="productId" href="./details.page?productId=' + index + '" >' + 
         '<img class="ui-li-thumb" src="' + value.thumbnail + '"/>' + 
         '<p style="margin-bottom:0px;margin-top:0px;">' + value.brand + '</p>' + 
         '<h3 style="margin-top:0px;margin-bottom:0px;">' + value.name + '</h3>' + 
         priceInfo); 



     }} 
     ); 

if (items.length === 0) { 
    items.push('<p style="text-align: left;margin-left: 10px">No results found.</p>'); 
} 
productListView.html(items.join('')); 
productListView.listview('refresh'); 

}

Answer 1

如果你建立你作爲一個對象，而不是隻是文字鏈接，你就可以綁定到單擊處理程序爲您打造這樣的：

// here's the click handler you need 
    itemLink.click(function(e) { 
     console.log("item clicked"); 
     if ($(this).data("clickCount") > 0) { 
      console.log("click count reached"); 
      return false; 
     } 

     console.log("following the link"); 
     // set a click counter 
     $(this).data("clickCount", 1); 
     // store the original href in case you need it 
     $(this).data("ogHref", $(this).attr("href")); 
     $(this).attr("href", "javascript://"); 
    }); 

JSFiddle

在擺弄我儘可能多地使用了你的代碼，但是使用jQuery對象創建了標記。

Answer 2

您可以使用jQuery的one()實現這個一次性的行動，例如：

$('a').one('click', 
      function(){ 
       alert('hi!'); 
       return false; 
      }); 

JS Fiddle demo。

或者不使用one()，你可以簡單地解除綁定的元素click()事件：

$('a').click(
     function(){ 
      alert('hi!'); 
      $(this).unbind('click'); 
      return false; 
     }); 

JS Fiddle demo。 參考文獻：

• one()。
• unbind()。

Answer 3

var currentValue=""; 

$('a').click(function(event) { 
    event.preventDefault(); 
    if(currentValue != $(this).attr("href")){ 
     currentValue = $(this).attr("href"); 
     // Your actions here 
    } 
}); 

因此，當鏈接的動作是最新的，但可以重用時鏈接就會死掉。 jsFiddle test。