Функция JavaScript срабатывает только тогда, когда вы нажимаете ссылку «Удалить» во второй строке.

У меня есть таблица данных jquery, теперь я хочу реализовать функцию удаления. но проблема в том, что функция javascript запускается только тогда, когда я нажимаю ссылку «удалить» во второй строке, в других строках функция javascript не запускается.

        <table class="table table-bordered table-responsive" id="tblDetails">
        <thead style="background-color:#ee5e45; color:white">
            <tr>
                <th>Movie Name</th>
                <th>Release Date</th>
                <th>Genre</th>
                <th>Price</th>
                <th>Action</th>
            </tr>
        </thead>
        @foreach (var item in ViewBag.Movies as List<Movie>)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelitem=>item.Title)
                </td>
                <td>
                    @Html.DisplayFor(modelitem => item.ReleaseDate)
                </td>
                <td>
                    @Html.DisplayFor(modelitem => item.Genre)
                </td>
                <td>
                    @Html.DisplayFor(modelitem => item.Price)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.code }, htmlAttributes: new { @class = "glyphicon glyphicon-pencil" }) | 
                    @Html.ActionLink("Delete", "Delete", new { id = item.code }, htmlAttributes: new { @class = "glyphicon glyphicon-trash", id = "dlt" })
                </td>
            </tr>
        }
    </table>

И код java-скрипта приведен ниже.

@section Scripts {
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="http://tristanedwards.me/u/SweetAlert//lib/sweet-alert.js"></script>
<script>
    $(document).ready(function (e) {
        $('#tblDetails').dataTable();
    });

    $("#dlt").click(function (e) {
        //whenever our button is clicked

        e.preventDefault();
        //get a reference to the container form 

        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then(function () {
            //user selected "Yes", Let's submit the form
            _form.submit();
        });

    });

</script>
    }

Пожалуйста, помогите мне в этом отношении заранее спасибо.

# asp.net-mvc-5
Источник
  • 3
    id должен быть уникальным во всем HTML-документе. Все ваши кнопки удаления имеют одинаковый id . Попробуйте изменить его на класс.
  • 0
    abhishekkannojia прав. если вы ищете id, jquery возвращает 1 элемент (последний, который можно найти в документе), а не массив элементов. Попробуйте установить идентификатор для индекса элемента в массиве Movie и установить для класса значение Delete. после этого вы можете работать с $(".Delete").each((count, element) => { ... });
  • 0
    @mtizziani, на самом деле это первый элемент с этим id , а не последний
  • 0
    Спасибо, Алот, я использовал имя класса вместо идентификатора своей работы
Codelisting
за 0 против
Лучший ответ

Здесь у вас несколько строк, поэтому нельзя использовать атрибут id для нескольких строк. в этом случае вы можете использовать атрибут класса

<td>
@Html.ActionLink("Edit", "Edit", new { id = item.code }, htmlAttributes: new { @class = "glyphicon glyphicon-pencil" }) | 

@Html.ActionLink("Delete", "Delete", new { id = item.code }, htmlAttributes: new { @class = "glyphicon glyphicon-trash deleteRow" })
</td>

в скрипте просто измените селектор

<script>
    $(document).ready(function (e) {
        $('#tblDetails').dataTable();
    });

    $(".deleteRow").click(function (e) {
        //whenever our button is clicked

        e.preventDefault();
        //get a reference to the container form 

        swal({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then(function () {
            //user selected "Yes", Let's submit the form
            _form.submit();
        });

    });

</script>
Codelisting
Популярные категории
На заметку программисту