Невозможно удалить данные после 10 записей в AJAX, JQuery и javascript/php
У меня есть 10 строк со вставленными данными, и я могу удалить любую из них, но после вставки с 11-й строки и далее я не могу удалить ни одну из строк после 10-й.
РЕДАКТИРОВАТЬ (Я НИЧЕГО НЕ МОГУ УДАЛИТЬ, КОГДА ПОКАЗЫВАЕТСЯ ОТВЕТСТВЕННАЯ ФОРМА)
$(document).ready(function(){
$('#list').dataTable({
responsive: true
});
$('.delete_piece').click(function(){
_conf("Are you sure to delete this piece?","delete_piece",[$(this).attr('data-id')])
})
})
function delete_piece($id){
start_load()
$.ajax({
url:'ajax.php?action=delete_piece',
method:'POST',
data:{id:$id},
success:function(resp){
if (resp==1){
alert_toast("Data successfully deleted",'success')
setTimeout(function(){
location.reload()
},1500)
}
}
})
}
УДАЛИТЬ ФУНКЦИЮ AJAX
if ($action == "delete_piece"){
$delsete = $crud->delete_piece();
if ($delsete)
echo $delsete;
}
УДАЛИТЬ ФУНКЦИЮ ДЛЯ АДМИНИСТРАТОРА (ME)
function delete_piece(){
extract($_POST);
$delete = $this->db->query("DELETE FROM mro_inventory where id = ".$id);
if ($delete){
return 1;
}
}
Спасибо за внимание, но было бы неплохо, если бы вы объяснили мне, в чем конкретная пагубность метода и что вы рекомендовали улучшить в БД.
ваш код широко открыт для атаки SQL-инъекцией. Никогда не используйте переменные непосредственно в sql, используйте prepared statements
Спасибо за рекомендацию, я все еще изучаю это, и я новичок в мире программирования, это всего лишь тест будущего веб-приложения, но я хочу сделать его как можно более безопасным ... и у меня есть несколько вопросов как и выше, я все еще застрял в проблеме, которая не позволяет мне удалить строку после 10-й строки. Было бы здорово, если бы вы помогли мне с этим. С уважением!!!!
Основная проблема, о которой вы сообщаете, связана с динамически создаваемыми элементами. Так как они добавляются после первых 10, событие click к ним не привязано. Чтобы решить эту проблему, я бы посоветовал использовать .on() для привязки события.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Рассмотрим следующее.
$(function() {
function delete_piece($id) {
start_load()
$.ajax({
url: 'ajax.php?action=delete_piece',
method: 'POST',
data: {
id: $id
},
success: function(resp) {
if (resp == 1) {
alert_toast("Data successfully deleted", 'success')
setTimeout(function() {
location.reload()
}, 1500);
}
}
});
}
$('#list').dataTable({
responsive: true
});
$('tbody').on("click", ".delete_piece", function(e) {
_conf("Are you sure to delete this piece?", "delete_piece", [$(this).attr('data-id')])
});
});Здесь используется метод .on() для делегирования события click классу.
Преимущество делегированных обработчиков событий состоит в том, что они могут обрабатывать события от элементов-потомков, добавленных в документ позднее. Выбрав элемент, который гарантированно присутствует во время присоединения делегированного обработчика событий, вы можете использовать делегированные обработчики событий, чтобы избежать необходимости часто прикреплять и удалять обработчики событий.
Подробнее: https://api.jquery.com/on/
Из вашего сообщения неясно, как выглядит структура HTML; тем не менее, вы используете DataTables, поэтому я знаю, что должен присутствовать элемент Table Body.
@Антонио рад, что смог помочь. Когда ваша репутация повышается, вы также можете голосовать за ответы, которые вы считаете полезными.
Я получил еще одну ошибку, связанную с «HTML: Uncaught ReferenceError: функция не определена в HTMLButtonElement.onclick», когда я использую ваш код, он показывает мне, что в консоли
Пожалуйста, предоставьте минимальный воспроизводимый пример: stackoverflow.com/help/minimal-reproducible-example
О, я уже решил проблему, все равно спасибо.
вот так я решил проблему!!
$(document).ready(function() {
$('#list').dataTable({
responsive: true
});
$('tbody').on("click", ".delete_piece", function() {
_conf("Are you sure to delete this piece?","delete_piece",[$(this).attr('data-id')])
})
})
function delete_piece($id){
start_load()
$.ajax({
url: 'ajax.php?action=delete_piece',
method: 'POST',
data: {
id:$id
},
success: function(resp) {
if (resp == 1) {
alert_toast("Data successfully deleted",'success')
setTimeout(function() {
location.reload()
}, 1500)
}
}
})
}
Ваш ответ можно улучшить, добавив дополнительную информацию о том, что делает код и как он помогает ОП.
Непонятно, что вы имеете в виду. Добавляются ли новые строки после загрузки страницы, которые не реагируют на событие клика? Кроме того, ваш метод выполнения SQL крайне небезопасен и может иметь катастрофические последствия для вашей БД.