Я искал это решение везде, но не смог найти ответ, который мог бы мне помочь. Мои теги отображаются с помощью ajax из базы данных таким образом, Код:
function all() {
// Ajax config
$.ajax({
type: "GET", //we are using GET method to get all record from the server
url: 'all.php', // get the route value
success: function (response) {//once the request successfully process to the server side it will return result here
// Parse the json result
response = JSON.parse(response);
var html = "";
// Check if there is available records
if(response.length) {
html += '<div class="list-group">';
// Loop the parsed JSON
$.each(response, function(key,value) {
// Our employee list template
html += '<a href="#" class="list-group-item list-group-item-action">';
html += "<p class='m-0'>" + value.let_txt_3 + "</p>";
html += "<p class='m-0'>" + value.let_txt_4 + "</p>";
html += "<p class='m-0'>" + value.let_txt_5 + "</p>";
html += "<p class='m-0'>" + value.let_txt_6 + "</p>";
html += "<button type='button' class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#edit-employee-modal' id='edit_employee_modal' data-bs-id='"+value.id+"'>Edit</button>";
html += '</a>';
});
html += '</div>';
} else {
html += '<div class="alert alert-warning">';
html += 'No records found!';
html += '</div>';
}
// Insert the HTML Template and display all employee records
$("#employees-list").html(html);
}
});
}
Я хочу манипулировать html кнопкой но у меня не получается.
html += "<button type='button' class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#edit-employee-modal' id='edit_employee_modal' data-bs-id='"+value.id+"'>Edit</button>";
Как пример помогите мне сделать следующее:
- При нажатие на кнопку чтобы выводился
alert("test");
- Или
edit_employee_modal.style.color = "red";
Моя проблема в том что я не знаю эту ошибку, inspect
-> console
(при нажатии на кнопку):
modal.js:332 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
at De._isAnimated (modal.js:332:26)
at De._initializeBackDrop (modal.js:205:24)
at new De (modal.js:82:27)
at De.getOrCreateInstance (base-component.js:55:41)
at HTMLButtonElement.<anonymous> (modal.js:434:22)
at HTMLDocument.n (event-handler.js:120:21)
Что я пробовал?!
let edit_employee_modal = document.querySelector("#edit_employee_modal");
edit_employee_modal.onclick = function() {
edit_employee_modal.style.color = "red";
}
Пробовал выполнить скрипт после загрузки страницы:
window.document.onload = function(e){
let edit_employee_modal = document.querySelector("#edit_employee_modal");
edit_employee_modal.onclick = function() {
edit_employee_modal.style.color = "red";
}
}
И заменял на код ниже, тоже не получилось (Потому что я думаю, что javascript не может прочитать мои теги):
window.onload = function(e){
//code
}
document.addEventListener("DOMContentLoaded", function(event) {
// code
});
Можете ли вы помочь мне с любыми идеями?
ps: я новичок не судите строго
document.createElement
, тогда вы так же сможете вставить любой текст, навесить нужные обработчики событий и в конце все эти элементы вставить в ваш HTML