Этот кусок html загружается вызовом ajax. Существует множество таких наборов html. Это всего лишь 1 набор:
print '<div id="'.$row['Event ID'].'" data-role="collapsible" data-collapsed="true">'; print '<h5 class="title">'.$row['Title'].'</h5>'; print '<ul data-role="listview" id="today_events">'; print '<li class="event"><a href="#">'; print '<table><tr><td>Date</td>'; print '<td class="date" style="padding: 10px;">'.$row['Date'].'</td>'; print '</tr><tr>'; print '<td> Time </td>'; print '<td class="time" style="padding: 10px;">'.$row['Time_Duration'].'</td>'; print '</tr><tr>'; print '<td> Venue </td>'; print '<td class="venue" style="padding: 10px;">'.$row['Venue'].'</td>'; print '</tr></table></a></li>'; print '<li style="background-color: #CADECC;">'; print '<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button>'; print '</li></ul>'; print '</div>'; Я пытаюсь дать предупреждение при нажатии кнопки. Предупреждение должно содержать заголовок и дату конкретной $row данных.
Это мой код jQuery (НО его не работает. Я вижу пустое предупреждение):
$("body").on('click','button',function(){ var title = $(this).closest("div").find(".title").text(); var date = $(this).closest("table").find(".date").text(); //var time = $(this).parents().find(".time").text(); //var venue = $(this).parents().find(".venue").text(); alert(title+date); });
Ваша строка, получившая название, прекрасна. Строка, получающая дату, ищет элемент-предок кнопки, которая является таблицей, но кнопка не находится в таблице, она находится только в div, в которой находится таблица. Итак:
var date = $(this).closest("div").find("table .date").text();
Живой пример :
<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <meta charset="utf-8"> <title>Example</title> </head> <body> <div id="event1" data-role="collapsible" data-collapsed="true"> <h5 class="title">Event Title One</h5> <ul data-role="listview" id="today_events"> <li class="event"><a href="#"> <table><tr><td>Date</td> <td class="date" style="padding: 10px;">01/01/2014</td> </tr><tr> <td> Time </td> <td class="time" style="padding: 10px;">1 hour</td> </tr><tr> <td> Venue </td> <td class="venue" style="padding: 10px;">One Plaza</td> </tr></table></a></li> <li style="background-color: #CADECC;"> <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button> </li></ul> </div> <div id="event2" data-role="collapsible" data-collapsed="true"> <h5 class="title">Event Title Two</h5> <ul data-role="listview" id="today_events"> <li class="event"><a href="#"> <table><tr><td>Date</td> <td class="date" style="padding: 10px;">02/02/2014</td> </tr><tr> <td> Time </td> <td class="time" style="padding: 10px;">2 hours</td> </tr><tr> <td> Venue </td> <td class="venue" style="padding: 10px;">Two Plaza</td> </tr></table></a></li> <li style="background-color: #CADECC;"> <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-calendar" style="width: 170px; float: right; position: relative;">Add to calendar</button> </li></ul> </div> <script> (function() { "use strict"; $("body").on('click','button',function(){ var title = $(this).closest("div").find(".title").text(); var date = $(this).closest("div").find("table .date").text(); //var time = $(this).parents().find(".time").text(); //var venue = $(this).parents().find(".venue").text(); alert(title+date); }); })(); </script> </body> </html>
ЕСЛИ вы хотите перейти к элементу вашего предка, я бы предпочел бы .parents вместо .closest , так это было бы так:
var title = $(this).parents("div").find(".title").text(); var date = $(this).parents("div").find("table .date").text();