Question

有没有办法在点击一次按钮后禁用按钮，这样用户就不会多次意外点击某个项目？

我有一个jQuery列表，从JSON数组填充。这是代码示例。我需要在这里添加功能，以便在点击一次后禁用点击回调。

如果我的问题不清楚，请告诉我，以便我可以用缺少的内容进行编辑。

谢谢!!

$('div[data-url*="details.page?productId"]').live("pageshow", function() {

var productId = getParameterByName("productId", $(this).data("url"));

$.mobile.pageLoading();

var product = catalog.products[productId];
$(this).find('#productName').text(product.name);
$(this).find('#productBrand').html(product.brand);
$(this).find('#productPrice').html(product.price);
$(this).find('#productDescription').html(product.description);
$(this).find('#productThumbnail').attr("src", product.thumbnail);
$(this).find('#add-to-cart').attr("product-item-id", productId);
$(this).find('#productSalePrice').html(product.salePrice);
$(this).find('#productSaleDesc').html(product.sale_desc);
$(this).find('#productCategory').html(product.category);
$(this).find('#longDescription').html(product.longDesc);

for (k = 1; k <= parseInt(product.rating); k++) {
    var starId = "#star" + k;
    $(this).find(starId).attr('src', '/pub/3/resources/ti/store/mobile/star-fill_30x25.png')
}

if (product.salePrice == '') {
    $(this).find('#productPrice').css('text-decoration', 'none')

}

else if (product.price > product.salePrice) {
    $(this).find('#productPrice').css('text-decoration', 'line-through');
    $(this).find('#salePrice').html(product.salePrice);
    $(this).find('#saleDesc').html(product.sale_desc);

}

$.mobile.pageLoading(true);


});


function refreshList() {
console.debug('About to refresh with sort type : ' + sortType);

switch (sortType) {
    case 'sort-a-z':
        catalog.products.sort(sort_by('name', false));
        break;
    case 'sort-z-a':
        catalog.products.sort(sort_by('name', true));
        break;
    case 'sort-price-up':
        catalog.products.sort(sort_by('price', false, parseFloat));
        break;
    case 'sort-price-down':
        catalog.products.sort(sort_by('price', true, parseFloat));
        break;
    default :

}

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

您可能正在使用.click(...)绑定点击处理程序，对吧？如果是这样，请改用.one('click', ...)。

Answer 2

这应该是您所需要的一切

$(li).click(function(){
  $(this).unbind('click'); 
  //do whatever you want here
});

编辑：如果您想在点击时删除链接，请执行此操作

$('.item a').one('click',function(){
  $(this).attr('href','javascript:void(0)');
});

Answer 3

您可以使用“one”方法而不是bind进行绑定（并在需要时反复重新连接）。

但更灵活的模式是绑定某些东西（例如，classname），删除该类名并在需要时重新附加它 - 这适用于生活事件。

$("div.clickme").live("click", function() {
   $(this).removeClass("clickme")
   ...
   $(this).addClass("clickme")
})

您还可以将此技术与使用setTimeout或其他内容相结合。

JQuery动态列表可防止对同一项目进行多次单击

3 个答案: