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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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