Кнопки пользовательской темы JQuery для мобильных устройств

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

У меня есть динамический html, который я ввожу через $("#container").append(...)

            <div>
                <a class="view-it" data-role="button" href="">View</a>
            </div>

Поскольку это динамично, мне нужно сделать

$("*[data-role='button']").button();

чтобы его инициализировать.

Хотя моя кнопка теперь выглядит как кнопка, якорь по-прежнему выглядит как гиперссылка, а событие щелчка срабатывает только при нажатии на гиперссылку внутри кнопки, а не на другие области самой кнопки.

Любые идеи?

Обновлять:

Если я использую такой div вместо привязки

            <div class="view-it" data-role="button">
                View 
            </div>

Теперь он отображается правильно, но по-прежнему не реагирует на нажатия по всей поверхности кнопки ... только вокруг текста (+ небольшой запас)


jquery jquery-mobile jquery-mobile-button
person Jeff    schedule 27.02.2014    source источник
comment
Какую версию вы используете?   -  person Omar    schedule 27.02.2014
comment
1.4.1 мобильного jquery   -  person Jeff    schedule 28.02.2014

Ответы (1)


arrow_upward
1
arrow_downward

data-role=button устарел, поэтому вам нужно добавлять классы вручную, и он не требует каких-либо улучшений вручную, даже если вы добавляете их динамически. .button() используется только для <input type=button>.

Ваше решение выглядит следующим образом:

var Btn = '<a href="#" class="ui-btn ui-btn-Custom ui-btn-icon-Position ui-icon-Name">Button</a>';

$(".selector").append(Btn);

  • ui-btn-Custom: образец темы, т.е. ui-btn-a

  • ui-btn-icon-Position: положение значка, слева, справа, сверху, снизу или без текста, т.е. ui-btn-icon-left

  • ui-icon-Name: изображение значка, т.е. ui-icon-home

Демо

person Omar    schedule 27.02.2014
comment
поэтому мне на самом деле нужно добавить каждый класс вместо того, чтобы говорить data-role='button' для каждой кнопки?? - person Jeff; 28.02.2014
comment
@Джефф да, точно. Он устарел и будет удален в версии 1.5. Вы заметите, что в теге привязки нет span. Это прямолинейно и быстрее в обработке. - person Omar; 28.02.2014
comment
шаг вперед, четыре назад - person Jeff; 28.02.2014
comment
@jeff haha..JQM отказался от многих виджетов для повышения производительности. Если вы все еще хотите использовать data-role, используйте .buttonMarkup() вместо .button(). Он также устарел и будет удален, но пока работает. - person Omar; 28.02.2014