0
<!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>

Вот пример кода. Но скрипт вызывается только при первом нажатии первого баттона. Как решить эту проблему?

2
  • попробуй bind на on поменять
    – IC_
    12 ноя 2017 в 14:07
  • 1
    Вы биндите событие на tbody, ну ок. Но, на странице не должно быть неуникальных id. Остальные просто никто не обрабатывает. Попробуйте изменить селектор на класс, например.
    – vp_arth
    12 ноя 2017 в 14:27

1 ответ 1

-1

Попробуйте сделать через each

$('#questions').each(function(){
    $(this).bind("click", function(){...})
});
2
  • 1
    $('#questions').length ?
    – user176262
    12 ноя 2017 в 18:06
  • 1
    Селектор по id всегда возвращает только один элемент
    – vp_arth
    12 ноя 2017 в 18:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.