Как отключить ссылку в jQuery Mobile?

У меня есть сайт jQuery Mobile Beta 1 с кнопкой ссылки jQuery 1.6.1 следующим образом:

<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

И в document.ready я установил событие click:

$('#subselection').livequery("click", function(){
  alert('test');
});

Я хочу отключить эту "ссылку", и я попробовал

$('#subselection').button('disable')

И эта команда устанавливает стиль кнопки, как будто он отключен, но работает событие click.

Я также пробовал

$('#subselection').prop('disabled', true);

и $('# subselection'). prop ('disabled'); дает true, но не отключается.

У кого-то есть хорошая идея.

Ответ 1

Элемент a не имеет свойства disabled. Поэтому определение одного не повлияет на какие-либо обработчики событий, которые вы могли бы подключить к нему.

пример: http://jsfiddle.net/niklasvh/n2eYS/

Список доступных атрибутов см. в ссылке HTML 5.

Чтобы решить вашу проблему, вместо этого вы можете, например, назначить disabled как data в элементе:

$('#subselection').data('disabled',true);

а затем в вашем случае проверьте, установлен ли его набор:

if (!$(this).data('disabled'))

пример: http://jsfiddle.net/niklasvh/n2eYS/5/

Ответ 2

Пример кнопки ссылки:

http://jsfiddle.net/gRLYQ/6/

var clicked = false;

$('#myButton').click(function() {
    if(clicked === false) {
        $(this).addClass('ui-disabled');
        clicked = true;
        alert('Button is now disabled');
    } 
});

$('#enableButton').click(function() {
    $('#myButton').removeClass('ui-disabled');
    clicked = false; 
});

HTML

<div data-role="page" id="home">
    <div data-role="content">

        <a href="#" data-role="button" id="myButton">Click button</a>
        <a href="#" data-role="button" id="enableButton">Enable button</a>

    </div>
</div>

ПРИМЕЧАНИЕ: - http://jquerymobile.com/demos/1.0rc2/docs/buttons/buttons-types.html

Связи, созданные как кнопки, имеют все те же визуальные параметры, что и истинные основанные на форме кнопки ниже, но есть несколько важных отличий. Кнопки на основе ссылок не являются частью плагина кнопки и просто используют базовый плагин buttonMarkup для создания стилей кнопок, чтобы методы кнопки формы (включить, отключить, обновить) не поддерживаются. Если вам нужно отключить кнопку на основе ссылки (или любой элемент), это можно применить отключенный класс ui-disabled самостоятельно с помощью JavaScript для достижения того же эффекта.

Ответ 3

В этом случае нет необходимости в jquery/javascript. Просто добавьте класс "ui-disabled".

Как например:

<a class="ui-disabled" id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

Вот что я делаю, и это работает для меня;)

Ответ 4

попробуйте использовать

$('#subselection').button().button('disable'); //disable in JQM

$('#subselection').button().button('enable'); //enable in JQM

это кажется визуально отображаемым для отображения стиля disable/enable... ОДНАКО, что "button" по-прежнему доступен для кликов (так что смотрите!: P)

Ответ 5

Я знаю, что уже есть принятый ответ на этот вопрос, но я думаю, что этот ответ намного легче понять. Просто верните функцию false.

<a id="subselection" href="#" data-role="button" data-theme="b">TEST</a>

<script>
$('#subselection').click(function() {
    alert("do some code here");
    return false;
});
</script>

Ответ 6

Вы также можете просто использовать тег/виджет кнопки непосредственно <button>TEST</button>, который имеет правильное отключение. Если вы просто используете его, чтобы поймать событие и запустить какой-то JavaScript, не знаете, какое преимущество было бы при использовании ссылки.