Есть ли способ создать список в Jquery Mobile, в котором есть интерактивные элементы списка, и каждый элемент имеет 3 кнопки? Я не хочу использовать просмотр списка с разделенной кнопкой. Я пытался создать это, но нажатия кнопок не работают. Щелчок по любой из кнопок ведет себя как щелчок по элементу списка.
Как создать список с кнопками внутри интерактивных элементов списка в Jquery Mobile
comment
какую версию jqm вы используете?
- person Omar   schedule 25.04.2014
Ответы (1)
Вы можете добавить e.stopImmediatePropagation();
(http://api.jquery.com/event.stopimmediatepropagation/) к нажатиям кнопки, чтобы они не распространялись на родительский элемент списка.
ОБНОВЛЕНИЕ:
ОП упомянул в комментариях, что элементы списка генерируются динамически. Исходный код по-прежнему работает, поскольку делегирование событий (https://learn.jquery.com/events/event-delegation/) использовался для кнопок. Вот обновленный пример:
Пустой UL в разметке
<ul data-role="listview" id="thelist">
</ul>
На pagecreate заполните список и добавьте обработчики кликов.
$(document).on("pagecreate", "#page1", function(){
//make list dynamically
var allItems = '';
for (var i=0; i< 4; i++){
allItems += '<li data-rowid="' + i + '"><a href="#"><div data-role="controlgroup" data-type="horizontal"><input type="button" value="Hmm" /><input type="button" value="No" /><input type="button" value="Yes" /></div> Item ' + i + ' text or description</a></li>';
}
$("#thelist").empty().append(allItems).listview("refresh").enhanceWithin();
$("#thelist").on("click", "li input", function(e){
e.stopImmediatePropagation();
var rowid = $(this).parents("li").data("rowid");
var btnText = $(this).val();
alert("You clicked the button: " + btnText + " on row number: " + rowid);
});
$("#thelist").on("click", "li a", function(e){
alert("You clicked the listitem");
});
});
Обновлен DEMO
ОРИГИНАЛ:
<ul data-role="listview" id="thelist">
<li data-rowid="1">
<a href="#">
<div data-role="controlgroup" data-type="horizontal">
<input type="button" value="Hmm" />
<input type="button" value="No" />
<input type="button" value="Yes" />
</div>
Item 1 text or description
</a>
</li>
</ul>
$(document).on("pagecreate", "#page1", function(){
$("#thelist li").on("click", "input", function(e){
e.stopImmediatePropagation();
var rowid = $(this).parents("li").data("rowid");
var btnText = $(this).val();
alert("You clicked the button: " + btnText + " on row number: " + rowid);
});
$("#thelist li").on("click", "a", function(e){
alert("You clicked the listitem");
});
});
Вы также можете поместить кнопки за пределы тега привязки listitem и использовать CSS, чтобы расположить все красиво...
person
ezanker
schedule
25.04.2014
Спасибо. Это отлично работает в этом примере. Но в моем случае строки списка генерируются динамически. В этом случае не срабатывает ни щелчок элемента списка, ни нажатие кнопки. Любая идея?
- person Adnan; 26.04.2014
@Adnan, я обновил свою скрипку, чтобы динамически создавать элементы списка: jsfiddle.net/ezanker/y79GW/2 Поскольку мои обработчики событий использовали делегирование событий, они по-прежнему работают нормально. Если ваш UL также создается динамически, вам нужно поместить обработчик в документ, а затем делегировать его кнопкам/элементу списка.
- person ezanker; 26.04.2014
@Adnan, я обновил свой ответ и FIDDLE с элементами динамического списка.
- person ezanker; 26.04.2014
Спасибо. Я получил идею.
- person Adnan; 26.04.2014
Кстати, это работает, только если вы сначала заполните список, а затем привяжете события щелчка. Я изменил код вашего примера, чтобы сначала связать события кликов, а затем заполнил список, и клики перестали работать. jsfiddle.net/y79GW/4
- person Adnan; 26.04.2014
@Adnan, я позаботился об этом в обновленном ответе, переместив li в делегированную часть: $(#thelist).on(click, li input, function(e){... Вот ваша скрипка обновлена: jsfiddle.net/ezanker/y79GW/5
- person ezanker; 26.04.2014
Спасибо. Теперь все идеально.
- person Adnan; 26.04.2014