Jquery Mobile определяет, какая строка была нажата в списке

Question

Я выглядел высоко и низко и не могу найти это нигде. Кто-нибудь знает, как получить значение строки постучал в просмотр списка? Это может быть что угодно от имени до индекса в объекте. Прямо сейчас у меня есть функция, которая обрабатывает кран. Мне нужно иметь возможность передать значение новой странице, которую я загружаю, когда она переходит. Я думал, что смогу сделать это здесь:

$('#taskListTable').delegate('li', 'tap', function () {
    console.log('clicked');
    //Insert code here to pull a value from either an index or a name and save it
});

Я думал, может быть, было бы хорошо сделать это в хеше? Я не уверен, что стандартная практика здесь, в сети, исходит от родного разработчика iOS, хотя. У кого-нибудь есть указатели? Спасибо.

Вот как я заполняю свой список:

$.each(tasks, function(index, task) { 
        $taskList.append("<li><a href='taskDetails.html'>      <h3>"+task.name+"</h3><p>"+task.description+"</p></a></li>");
    });

taskDetails.html нужен индекс задачи, чтобы я мог получить подробности с сервера. Какова стандартная практика для этого?

Answer 1

Чтобы получить индекс элемента списка tap ed, вы можете сделать это:

$('#taskListTable').delegate('li', 'tap', function () {
    console.log('clicked');
    var index = $(this).index();
});

Да, вот и все.Хотя предполагается, что все элементы <li> - это братья и сестры.

Документы для .index(): http://api.jquery.com/index

Если вы хотите перейти на новую страницу:

$('#taskListTable').delegate('li', 'tap', function () {
    console.log('clicked');
    $.mobile.changePage($(this).find('a').attr('href'), {
        data : { selectedIndex : $(this).index() }
    });
});

Это откроет новую страницу и присоединит переменную selectedIndex в качестве параметра строки запроса, для которого задан индекс элемента списка tap ped.

Кроме того, чтобы иметь возможностьзапретить поведение по умолчанию при нажатии на ссылку в элементе списка, я бы прикрепил этот обработчик событий к элементам ссылки:

$('#taskListTable').delegate('a', 'tap', function (event) {
    event.preventDefault();
    console.log('link clicked');
    $.mobile.changePage($(this).attr('href'), {
        data : { selectedIndex : $(this).closest('li').index() }
    });
});

Answer 2

Метод «делегат» устарел в новых версиях jQuery. Попробуйте использовать это вместо:

$('#taskListTable').on('tap', 'a', function (event) {

}

Вот еще один метод получения идентификатора, особенно полезный, если у вас есть приложение с поддержкой базы данных, а искомый идентификатор - это идентификатор базы данных, а не индекс строки:

При заполнении таблицы учитывайте следующее:

<ul id="taskListTable">
  <li id="task400" class="tasks">Task with db id 400</li>
  <li id="task295" class="tasks">Task with db id 295</li>
</ul>

$('#taskListTable').on('tap', 'li', function (event) {
  variable = $(this).attr('id').substr(4);
}

Получит идентификатор базы данных, который вы можете передать другим страницам.

Answer 3

Решение Jasper хорошо, но если у вас есть какой-либо другой код в вашем обработчике событий, который редактирует DOM, ключевое слово «this» может указывать куда-то совершенно другое к тому времени, когда оно используется в вашем коде.

Я несколько раз ломал голову над своей клавиатурой, потому что мои пользователи говорили: «Я нажимаю на элемент один, но всегда открывается экран редактирования для последнего элемента в списке».Так что каким-то образом использование 'this' было неправильным путем.

Кроме того, когда я попробовал event.target, event.currentTarget или event.originalTarget, они тоже не сработали.Все они указали на «страницу» jQueryMobile, которая была видна к моменту запуска кода (это была даже не та же страница, где находилась таблица).

Безопасный и / или предполагаемый подходto:

• использовать event.originalEvent.srcElement вместо 'this'
• не использовать .delegate (), но использовать .on ()
• связывать событиеиспользуя $ (document) .on (), а не $ ('# table'). on ()

Так что это приведет к:

$(document).on('tap','#taskListTable li',function(event){

    //The properties of 'event' relate to $(document), not to '#taskListTable li',
    //so avoid .currentTarget, .target etc.

    //But fortunately 'event' does have one property that refers to the original 
    //user event.    
    var theOriginalTapEvent = event.originalEvent;
    var theRealClickedElement = theOriginalTapEvent.srcElement;

    //Note that the clicked element could be a sub-element of the li
    //whose index you want. So just referencing theRealClickedItem could
    //could still be getting you bad results.

    var theRelevantListItem = $(theRealClickedElement).parents('li');

    //Now you're ready to get the item's index or whatever.
})

Answer 4

А как насчет этого подхода?

$taskList.append("<li><a href='taskDetails.html?id=" + task.id + "'></a><h3>" + task.name + "</h3>...</li>");

А затем получить id параметр.

Answer 5

Чтобы получить имя, вы можете сделать:

$(this).find('h3').html()

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