В общем, есть страница, где я работаю с ajax и jquery. С одной половины страницы размещены 3 инпута, куда я загоняю инфу, со второй размещена таблица, куда ранее введенная информация попадает, то есть таблица формируется динамически.
Данные введённые в инпуты посылаются аяксом в обработчик пхп, который в свою очередь загоняет их в БД, а затем из БД формирует json файл(Не спрашивайте, почему делаю так, это по условию). Затем аяксом я считываю json файл и вывожу его в таблицу на страницу.
В общем вот код:
<script type="text/javascript">
$(document).ready(function(){ //Тут я по клику собираю данные
$("#send").click(function() { //из инпутов и отправляю в обработчик
var firstName = $('#firstName').val();
var secondName = $('#secondName').val();
var email = $('#email').val();
$.ajax({
url: "core.php",
type: "POST",
data: {firstName,secondName,email}
});
});
$.ajax({ //Тут я беру готовый json файл и вывожу
url:"table_push.json", //в таблицу на странице
dataType: "json",
success:function() {
$.getJSON('table_push.json',function (data) {
for(var i = 0; i<data.length;i++){
$('#users').append('<tr><td>' + data[i].id + '</td><td>' + data[i].firstName +
'</td><td>' + data[i].secondName + '</td><td>'+ data[i].email+'</td><td><button id='+data[i].id+' class="btn btn-danger">Remove</button></td></tr>');
} // В цикле сверху, я присваиваю id тегу <button>,
$(".btn").bind('click', function () { // что б было
var line = $(this).attr('id'); // удобно удалить
alert(line); //строку из таблицы
// а вот в этой функции сверху я проверяю через алерт
})//правильность присвоенного id кнопке, выводит
});
$(".btn").bind('click', function () {
var line = $(this).attr('id');
alert(line);
// а вот в этой функции я уже не могу обратится к id
}) // на странице ничего не происходит и ошибок в консоли нету
// по этому не могу напсать ещё один ajax запрос на удаление
// данных из таблицы в БД
}
});
});
</script>
Задача стоит в том, что бы вывести инфу на таблицу, а затем ее удалить нажимая на определённую запись в табличке. Но я не могу этого сделать, так как не могу обратится по id к записи которая нуждается в удалении. Если смотреть через консоль в браузере, то всем кнопкам удаления записи присвоенные id, но я не могу к ним обратится что б в будущем манипулировать содержимым таблицы.
В HTML5 для любого элемента можно использовать собственные атрибуты, начинающиеся с префикса data-. Это позволяет хранить информацию, не занимая стандартные атрибуты, которые несут другую функциональность.
Создайте кнопку так:
<button data-id=' + data[i].id + ' class="btn btn-danger">Remove</button>
Затем в скрипте получите id с помощью data():
var line = $(this).data('id');
Чтобы найти строку таблицы, в которой кнопка находится, не обязательно давать ей уникальное имя:
$(this).closest('tr').remove()
TR+ID
Пусть <tr>
получит id='tr'+data[i].id
. Тогда вы без труда получите id строки, зная id кнопки:
var line = $(this).attr('id');
$('#tr'+line).remove()
Рабочий пример с closest():
var data=[
{firstName:'Foo', secondName:'Bar', email:'foo@Bar.ru',id:'1'},
{firstName:'Foo2',secondName:'Bar2',email:'foo@Bar.ru',id:'2'}
]
for (var i = 0; i < data.length; i++) {
$('#users').append('<tr><td>' + data[i].id +
'</td><td>' + data[i].firstName +
'</td><td>' + data[i].secondName +
'</td><td>' + data[i].email +
'</td><td><button id=' + data[i].id + ' class="btn btn-danger">Remove</button></td></tr>');
}
$(".btn").bind('click', function() {
var line = $(this).attr('id');
//здесь код удаления строки из БД
$(this).closest('tr').remove()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id=users></table>
Рабочий пример с data():
var data=[
{firstName:'Foo', secondName:'Bar', email:'foo@Bar.ru',id:'1'},
{firstName:'Foo2',secondName:'Bar2',email:'foo@Bar.ru',id:'2'}
]
for (var i = 0; i < data.length; i++) {
$('#users').append('<tr id=' + data[i].id + '><td>' + data[i].id +
'</td><td>' + data[i].firstName +
'</td><td>' + data[i].secondName +
'</td><td>' + data[i].email +
'</td><td><button data-id=' + data[i].id + ' class="btn btn-danger">Remove</button></td></tr>');
}
$(".btn").bind('click', function() {
var line = $(this).data('id');
//здесь код удаления строки из БД
$('#'+line).remove()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id=users></table>
Перепроверьте селектор обязательно. Немножко противоречит высказывание, в DOM по коду пытаетесь получить class-ы, а не id.
Предполагаю, что у Вас проблема в том, что обработчик привязывается к элементам, которые еще не существуют на странице(не добавлены в DOM). После того, как получены данные с сервера, и добавлен новые элементы на страницу, события "щелчка" к новым элементам ".btn" не прикрепляются:
$(".btn").bind('click', function () {
var line = $(this).attr('id');
alert(line);
});
Этот код можно вставить внутри обработчика события ajax после кода, который добавляет новые элементы в DOM страницы. А можно воспользоваться следующей конструкцией:
$(document).on('click', '.btn', function () {
//Your code
});
Подробную информация о предложенной мною конструкции, смотрите в официальной документации версии jQuery, которую используете. Или, вот, здесь есть полезные сведения: http://jquery.page2page.ru/index.php5/On
Виртуальный выделенный сервер (VDS) становится отличным выбором
Где в играх хранятся картинки? Я делаю игру на С++, и там надо явно указывать пути к файлам; когда я скачиваю какую-нибудь игру, там нет картинокКуда...