Проблема с получением id тега в jquery

338
27 декабря 2016, 01:35

В общем, есть страница, где я работаю с 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, но я не могу к ним обратится что б в будущем манипулировать содержимым таблицы.

Answer 1
  1. Вместо id используйте атрибуты data-*

В HTML5 для любого элемента можно использовать собственные атрибуты, начинающиеся с префикса data-. Это позволяет хранить информацию, не занимая стандартные атрибуты, которые несут другую функциональность.

Создайте кнопку так:

<button data-id=' + data[i].id + ' class="btn btn-danger">Remove</button>

Затем в скрипте получите id с помощью data():

var line = $(this).data('id'); 
  1. Используйте closest()

Чтобы найти строку таблицы, в которой кнопка находится, не обязательно давать ей уникальное имя:

$(this).closest('tr').remove()
  1. Дайте строке таблицы id по принципу 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>

Answer 2

Перепроверьте селектор обязательно. Немножко противоречит высказывание, в 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

READ ALSO
Как хранятся картинки в играх? [требует правки]

Как хранятся картинки в играх? [требует правки]

Где в играх хранятся картинки? Я делаю игру на С++, и там надо явно указывать пути к файлам; когда я скачиваю какую-нибудь игру, там нет картинокКуда...

331
Взвешенный граф

Взвешенный граф

Есть точки вершин : 1(1,5), 2(3,2) и тд

340