jQuery Mobile的刪除類不工作的單擊事件

Question

我在jQuery Mobile的一個按鈕：

<a href="#" data-role="button" id="show_edit" data-theme="d" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-corner-left ui-btn-up-a ui-btn-up-d"><span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">Edit</span></span></a> 

如果我這樣做，在控制檯，它的工作原理（按鈕顏色變化）：

$('#show_edit').removeClass('ui-btn-up-d').addClass('ui-btn-up-a'); 

但是，如果我在頁面上包裝了點擊處理程序，那麼類'ui-btn-up-d'不會被刪除？

$('#show_edit').on('click', function() { 
        $(this).removeClass('ui-btn-up-d').addClass('ui-btn-up-a'); 
       }); 

編輯：我覺得下面的答案是正確的，但這裏是另一種方式，它正在改變着數據過於主題：

$('#show_edit').attr('data-theme', 'a').attr('class', 'ui-btn ui-corner-left ui-btn-up-a'); 

Answer 1

最有可能你沒有約束力事件在正確的時間，或者它瞄準的是錯誤的元素（如重複的ID，這是非常容易JQM得到無意的）

例如，如果您的當前頁面有一個id="home"，你會綁定這樣的：

// every time the id="home" page is initialized, run this handler 
$(document).on('pageinit','#home',function(){ 

    // ensure it targets only elements within this page, however it would 
    // be better if you didn't use ID's in jQuery Mobile due to the way it 
    // handles pages. 
    $('#show_edit',this).click(function() { 
     //$(this).removeClass('ui-btn-up-d').addClass('ui-btn-up-a'); 
     $(this).toggleClass('ui-btn-up-d ui-btn-up-a'); 
    }); 

});