JQuery Mobile Styling DOM

Question

Использование JQM 1,3

В моей разметке внутри контента у меня есть:

<div class="simpleCart_items" ></div> 

Этот DIV будет заполняться с использованием содержимого из файла JavaScript. Фактически он будет выводить элементы, которые были добавлены в список корзины покупок.

Также есть ссылка «удалить», что она также генерируется рядом с каждым из элементов в списке. Я не могу тратить Oportunity стилизовать эту ссылку с хорошей кнопкой мини JQM, что вы можете показать этот код:

<a href="index.html" data-role="button" data-icon="Remove" data-iconpos="notext">Delete</a> 

Внутри JavaScript я нашел строку, которая отвечает за генерируя эту ссылку удалить.

remove: function (item, column) { 
        return "<a href='javascript:;' class='" + namespace + "_remove'>" + (column.text || "X") + "</a>"; 
      } 

На поджигатель эта линия будет выводиться так же, как это:

<div class="item-remove"> 
<a class="simpleCart_remove" href="javascript:;">Remove</a> 
</div> 

В качестве общего новичка к событиям и DOM я подумал: «Эй, почему бы вам не добавить эти данные, ролевые atributes к этому JavaScript линия ?" Вы, ребята, знаете, что это не будет работать так.

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

После пробовать все, я отказываюсь от этого сам. Если вы, ребята, вышли со сценарием, пожалуйста, скажите мне, где именно его разместить, это может каким-то образом повлиять на результаты.

Answer 1

В jQM после того, как вы программно добавили кнопку, вам необходимо вызвать метод refresh, чтобы jQM увеличил свою разметку.

$("<a href='#' data-role='button' data-icon='delete' data-iconpos='notext' data-inline='true' class='simpleCart_remove'>Remove</a>") 
    .appendTo("div.simpleCart_items") 
    .buttonMarkup('refresh'); 

Здесь работает jsFiddle

В jsfiddle примере я изменил <a> на <button> (BTW это более емким), чтобы хорошо играть с ListView и связать click событие для удаления элементов.