Изменение состояния кнопки при нажатии/отпуске

Question

Я занимаюсь разработкой мобильного сайта. Я создал динамические кнопки в java-скрипте. Теперь я хочу связать два события с каждой кнопкой.

1) при нажатии, измените фоновое изображение кнопки на img-press.jpg. Примечание. Каждая кнопка имеет свой собственный обычный и нажатый источник изображения.

2) при нажатии, сделайте что-нибудь.

Я очень смущен работать вместе с этими двумя событиями.

ItemsToAdd += '" id="'+ appVal.id +'">\ 
       <a id="' + appVal.id + '" data-role="button" style="background-image:url('+ img_path + appVal.big_icon_normal_path +')" class="custom-button" href="#"></a>\ 
       <p><br><b>' + appVal.name + ' </b><br> ' + appVal.apptypename + '<br><i>' + appVal.price + '</i></p> </div>'; 


$("#appGrid" + catVal.id).append($(ItemsToAdd)); 
$("#appGrid" + catVal.id).trigger("create");  

$("#appGrid" + catVal.id + " > #" + appVal.id + " > #" + appVal.id).bind('click', function() 
{ 
    updateAppInfo(appVal.id); 
}); 

Код отлично работает при событии click. На самом деле я меняю содержимое на кнопку. Теперь я хочу изменить источник изображения при нажатии и переключиться на источник в нормальном режиме, когда нажмите. Изменение контента также должно работать с ним.

Буду признателен Вам за помощь. Заранее спасибо.

Answer 1

Попробуйте добавить это:

// preload the image 
var preloader = new Image(); 
preloader.src = img_path + appVal.big_icon_mousedown_path; 

// bind the events 
$('.custom-button').bind({ 
    'mousedown' : function() { 
      // you'll need to set appVal.big_icon_mousedown_path or similar 
      $(this).css('background-image', 'url('+ img_path + appVal.big_icon_mousedown_path +')'); 
    }, 
    'mouseup mouseleave' : function() { 
      $(this).css('background-image', 'url('+ img_path + appVal.big_icon_normal_path +')'); 
    } 
});