JQuery dynamic list prevent multiple clicks on same item

Is there a way to disable a button after it's been clicked once, so the user doesn't accidentally click an item multiple times?

I have a jQuery list, populated from a JSON array. Here's a sample of the code. I need to add functionality in here to disable the click callback after it's been clicked once.

If my question is unclear, please tell me so I can edit it with what's missing.

Thanks !!

$('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.t开发者_如何学JAVAoUpperCase().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');


}

You're probably binding click handlers using .click(...), right?
If so, just use .one('click', ...) instead.

You can bind using "one" method instead of bind (and reattach it again and again when needed).

But more flexible pattern is to bind on something (say, classname), remove that classname and reattach it when needed - this works with life events.

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

You can also combine this technique with using setTimeout or something.

This should be all you need

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

EDIT: If you want to remove a link on click just do this

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