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

您可以使用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 2

如果您将链接构建为对象而不仅仅是文本，则可以在构建时将其绑定到单击处理程序：

// 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 3

var currentValue="";

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

因此，当它的动作是最新的时，链接就会消失，但可以重复使用。 jsFiddle test

JQuery列表，防止链接被多次点击

3 个答案: