jQuery события на реагирующих данных не работают

У меня есть событие jQuery, связанное с элементом внутри таблицы данных, который срабатывает без проблем, когда таблица имеет полную ширину. Однако, когда таблица свертывается и применяются таблицы данных, реагирующие на событие, событие не срабатывает. Никаких ошибок в консоли нет.jQuery события на реагирующих данных не работают

Вы можете увидеть ниже код и попробовать его на jsfiddle здесь:

Js-Fiddle Here

Нажмите на мусорный бак, и вы получите всплывающее окно. Измените размер страницы, пока таблица не рухнет. Откройте столбец, чтобы открыть корзину, и когда вы нажимаете на нее, ничего не происходит.

Любые идеи?

<!DOCTYPE html> 
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width"> 

<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css"> 
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.min.css"> 
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css"> 
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="//cdn.datatables.net/tabletools/2.2.3/js/dataTables.tableTools.min.js"></script> 
<script type="text/javascript" src="//cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.min.js"></script> 

<script> 
$(document).ready(function() { 

// load data tables if element found 
if (document.getElementById('data-table')) { 
    $('#data-table').DataTable({ 
     "responsive": true, 
     "paging": true, 
     "searching": true, 
     "ordering": false, 
     "info":  false 
    }); 
} 

$(".deleteMe").bind('click', function() { 

    var dataString = $(this).attr('data'); 

    alert(dataString); 
}); 

}); 

</script> 
</head> 
<body> 

<table width="100%" id="data-table" class="display dataTable"> 
<thead> 
<tr> 
<th>Col</th> 
<th>Col</th> 
<th>Col</th> 
<th>Col</th> 
<th>Col</th> 
<th width="10%">Actions</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>asfas</td> 
    <td align="middle">fgfg</td> 
    <td align="middle">COMPLETED</td> 
    <td align="middle">4</td> 
    <td align="middle">4</td> 
    <td width="10%"> 
     <a href="#"> 
      <i alt="Delete" class="fa fa-trash fa-lg deleteMe" id="questionDelete" data="some text 1"></i> 
     </a> 
    </td> 
</tr> 
<tr> 
    <td>sdfs</td> 
    <td align="middle">test</td> 
    <td align="middle">2014-02-28</td> 
    <td align="middle">1</td> 
    <td align="middle">0</td> 
    <td width="10%"> 
     <a href="#"> 
      <i alt="Delete" class="fa fa-trash fa-lg deleteMe" id="questionDelete" data="some text 2"></i> 
     </a> 
    </td> 
</tr> 
<tr> 
    <td>sfdsf</td> 
    <td align="middle">fgfg</td> 
    <td align="middle">COMPLETED</td> 
    <td align="middle">4</td> 
    <td align="middle">4</td> 
    <td width="10%"> 
     <a href="#"> 
      <i alt="Delete" class="fa fa-trash fa-lg deleteMe" id="questionDelete" data="some text 3"></i> 
     </a> 
    </td> 
</tr> 
</tbody> 
</table> 

</body> 
</html>

источник

2015-05-14 williamsdb

FYI, это не является допустимой HTML разметки, идентификаторы должны быть уникальными в контексте документа –

Я хотел бы предложить использовать .on вместо этого и прикрепить click функцию и data атрибут <a> вместо <i>, как показано ниже:

DEMO HERE

Ваш последний столбец каждой строки изменится на

<td width="10%"> 
    <a href="#" class="deleteMe" data="some text 1"> 
     <i alt="Delete" class="fa fa-trash fa-lg" id="questionDelete" ></i> 
    </a> 
</td>

То же самое для других столбцов, которые есть в демо

JS для удаления будет:

$(".dataTable").on('click','.deleteMe', function() { 
    var dataString = $(this).attr('data'); 
    alert(dataString); 
});

источник

2015-05-14 13:26:38

Благодаря @Guruprasad Рао, который, кажется, работает, но я не понимаю, почему. Можете ли вы объяснить, почему? Благодарю. – williamsdb

Даже не уверен, но так как позиция управления в DOM меняется, возможно, она не сможет ее найти. Я чувствую, что это причина. –

Datatables на jquery вызывает все размеры.Выполнение деклараций ширины, которые он не может изначально или добавлять/удалять не через API, приводит к нечетности при изменении размера. – Richard

Причина, почему это не работает то, потому что DataTables выстреливает «fnDraw» событие каждый раз, когда это попросил изменить размер, сделать паузу или вкратце, что-то сделать.

Элементы «deleteMe» первоначально привязаны к таблице при первом рендеринге, но $(".deleteMe").bind('click', function() { } не вызывается, когда ваши таблицы изменяются.

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

if (document.getElementById('data-table')) { 
    $('#data-table').DataTable({ 
    "responsive": true, 
    "paging": true, 
    "searching": true, 
    "ordering": false, 
    "info":  false, 
    //add a listener to fire when redrawn: 
    "fnDrawCallback" : function(oSettings) { 
     setDeleteMeEvent() 
    } 
    }); 
} 

function setDeleteMeEvent() { 
    //Ensure that prior event is take off the DOM 
    $(".deleteMe").unbind('click') 
    $(".deleteMe").bind('click', function() { 
    var dataString = $(this).attr('data'); 
    alert(dataString); 
}

Вы должны отвязать предыдущее событие щелчка или иначе неожиданные вещи будут происходить. Вероятно, несколько обработчиков событий будут стекаться на dom, заставляя ваше событие click срабатывать один раз для перерисовки.

Более подробная информация о (Кажущейся обновлено) сделать обратный вызов документируются: https://datatables.net/reference/option/drawCallback

Также обратите внимание, что @ ответ Гурупраседа работает, потому что вы связываете событие щелчка для самой всей таблицы.

Я обновил вашу скрипка здесь: http://jsfiddle.net/eggmatters/891mdyvy/16/

источник

2016-09-28 18:35:57 eggmatters

У вас код Fiddle имеет ошибку. Событие не срабатывает, когда столбец рушится для гибкого отображения. – Corey

jQuery события на реагирующих данных не работают

ответ

Смежные вопросы