<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Page</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready (function () {
$("#quetions").bind("click", function (event) {
const id = event.target.dataset.index;
$.ajax({
url: "questionedit/del",
type: "GET",
data: ({id: id}),
success: function () {
$(`[data-index~=${id}]`).parent().parent().remove()
}
})
})
})
</script>
<link rel="stylesheet" href="{{ asset("Styles/AdminPageStyle.css") }}">
</head>
<body>
<ul id="menu">
<li id ="mainPage"><a href="{{ path('admin') }}">Main Page</a></li>
<li id = "userPage"><a href="{{ path('admin/useredit') }}">User controller</a></li>
<li id ="questionPage"><a href="{{ path('admin/questionedit') }}">Question controller</a></li>
<li id ="quizPage"><a href="{{ path('admin/quizedit') }}">Quiz controller</a></li>
</ul>
</body>
<div>
<table class="questionTable">
<thead>
<tr>
<th class="RedWord">Question</th>
<th>1st variant</th>
<th>2st variant</th>
<th>3st variant</th>
<th>4st variant</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="QuestionName"></td>
<td><input type="text" name="1stAnswer" ></td>
<td><input type="text" name="2stAnswer" ></td>
<td><input type="text" name="3stAnswer" ></td>
<td><input type="text" name="4stAnswer"></td>
<td><button type="submit">Add question</button></td>
</tr>
{% for question in questions %}
</tbody>
<tbody id="quetions">
<tr>
<td>{{ question.name_of_question }}</td>
{% for answer in answers %}
{% if answer.Question_id.id==question.id %}
<td>{{ answer.name_of_answer }}{{ answer.right }}</td>
{%endif%}
{% endfor %}
<td><button data-index={{ question.id }} type="button">Delete</button></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</html>
Вот пример кода. Но скрипт вызывается только при первом нажатии первого баттона. Как решить эту проблему?
bind
наon
поменять