Рендеринг кнопки в мобильном jquery

Question

jQuery mobile button отображает тарабарщину для кнопки фильтра после нажатия на пагинацию.Событие щелчка, которое показывает карту, также перестает работать после изменения страницы.

Должен ли я вызвать страницу обновления?

Ссылка в песочнице

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

<div data-role="header" data-theme="b" id="rest-header">
    <div class="ui-grid-b">
        <div class="ui-block-a"><a href="#" data-role="button" id="filter-btn" class="ui-btn-left">Filter</a></div>
        <div class="ui-block-b"><input type="search" name="search"value="" data-theme="d" /></div>
        <div class="ui-block-c"><a href="#" data-role="button" id="map-btn" class="ui-btn-right">Map</a></div>
    </div>
</div><!-- /header -->

Answer 1

Сначала я бы предложил использовать jQuery 1.6.4, поскольку jQM поддерживает эту версию только для 1.0

.

Ваша проблема в том, что вы добавляете кнопку «Назад» при переходе на другую страницу, это вызывает наложение как фильтра, так и кнопки «Назад».

Удаление атрибута data-add-back-btn="true" должно решить проблему

Answer 2

Для кнопки карты вы должны использовать динамическое связывание или делегирование событий, чтобы оно работало с динамическим контентом.Вместо

$( "#map-btn" ).bind( "click", function(event, ui) { ... });

попробуйте

$(document).on('click', '#map-btn', function() {
    // ...
})

Для кнопки фильтра я вижу кнопку Back под кнопкой Filter, поэтому вы хотите избавиться от кнопки Назад, так кактебе это не нужно прямо там.Вы можете удалить атрибут data-add-back-btn="true".