Как создать список с кнопками внутри интерактивных элементов списка в Jquery Mobile

Есть ли способ создать список в Jquery Mobile, в котором есть интерактивные элементы списка, и каждый элемент имеет 3 кнопки? Я не хочу использовать просмотр списка с разделенной кнопкой. Я пытался создать это, но нажатия кнопок не работают. Щелчок по любой из кнопок ведет себя как щелчок по элементу списка.


person Adnan    schedule 25.04.2014    source источник
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>&nbsp;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
comment
Спасибо. Это отлично работает в этом примере. Но в моем случае строки списка генерируются динамически. В этом случае не срабатывает ни щелчок элемента списка, ни нажатие кнопки. Любая идея? - person Adnan; 26.04.2014
comment
@Adnan, я обновил свою скрипку, чтобы динамически создавать элементы списка: jsfiddle.net/ezanker/y79GW/2 Поскольку мои обработчики событий использовали делегирование событий, они по-прежнему работают нормально. Если ваш UL также создается динамически, вам нужно поместить обработчик в документ, а затем делегировать его кнопкам/элементу списка. - person ezanker; 26.04.2014
comment
@Adnan, я обновил свой ответ и FIDDLE с элементами динамического списка. - person ezanker; 26.04.2014
comment
Спасибо. Я получил идею. - person Adnan; 26.04.2014
comment
Кстати, это работает, только если вы сначала заполните список, а затем привяжете события щелчка. Я изменил код вашего примера, чтобы сначала связать события кликов, а затем заполнил список, и клики перестали работать. jsfiddle.net/y79GW/4 - person Adnan; 26.04.2014
comment
@Adnan, я позаботился об этом в обновленном ответе, переместив li в делегированную часть: $(#thelist).on(click, li input, function(e){... Вот ваша скрипка обновлена: jsfiddle.net/ezanker/y79GW/5 - person ezanker; 26.04.2014
comment
Спасибо. Теперь все идеально. - person Adnan; 26.04.2014