Как выполнить функцию JavaScript на динамически создаваемом событии нажатия кнопки.

Question

Как выполнить функцию JavaScript на динамически создаваемом событии нажатия кнопки.

0

На моем HTML-дисплее у меня есть таблица, показывающая некоторые имена загруженных файлов. и кнопку для удаления этого файла.

имена файлов загружаются динамически с помощью Php

<tbody>
               <?php
                    foreach ($uploaded_files as $val) {
                        ?>
                        <tr>
                            <th>
                                <a href="delete_this_file/<?php echo $val['id']; ?>" class="delete" data-confirm="Are you sure to delete this item?"><div class="btn btn-danger">Delete</div></a>
                            </th>
                            <th>
                                <?php echo $val['file_name']; ?>
                            </th>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>

и у меня есть функция javascript в разделе html head, вроде этого, чтобы подтвердить, действительно ли он хочет ее удалить.

$(document).ready(function() {
                        var deleteLink = document.querySelector('.delete');
                        deleteLink.addEventListener('click', function(event) {
                            event.preventDefault();

                            var choice = confirm(this.getAttribute('data-confirm'));

                            if (choice) {
                                window.location.href = this.getAttribute('href');
                            }
                        });
                    });

это хорошо работает только для первой кнопки, а для других кнопок она перенаправляется на эту ссылку href= "delete_this_file/

может кто-нибудь покажет мне ошибку в этом коде. Я не могу понять.

Большое спасибо

Yasitha 13 март 2014, в 09:37

Источник

4

Можете ли вы объяснить разницу между «работать хорошо» и «перенаправление»?
T J 13 март 2014, в 08:39
0

работать хорошо означает, что он дает это окно подтверждения перед перенаправлением на удаление контроллера. в другом случае он перенаправляет без предоставления этого окна подтверждения. :)
Yasitha 13 март 2014, в 08:42
1

какое свойство файла вы отправляете контроллеру для удаления файла соответственно?
Reza Saberi 13 март 2014, в 08:43
0

почему вы хотите сделать так много сложностей, просто добавьте onclick = "somefunction (this.id)" во время итерации, тогда вы можете написать минимизируемую функцию, которая выполняет эту проверку
RONE 13 март 2014, в 08:47
0

идентификатор файла в таблице mysql.
Yasitha 13 март 2014, в 08:47
1

Ваш HTML неверен. Тебе не может быть.
putvande 13 март 2014, в 08:48
0

@RaviMone - я думал, что это не очень хорошая практика. stackoverflow.com/questions/1687296/...
Yasitha 13 март 2014, в 08:49
0

@putvande - Большое спасибо за указание на это. это была глупая ошибка, которую я сделал.
Yasitha 13 март 2014, в 08:51

Показать ещё 6 комментариев

Теги:

php

javascript

jquery

html

2 ответа

0

<tbody>
               <?php
                    foreach ($uploaded_files as $val) {
                        ?>
                        <tr>
                            <th>
                                <a style="cursor:pointer" onclick="deleteFun(<?php echo $val['id']; ?>)" class="delete"><div class="btn btn-danger">Delete</div></a>
                            </th>
                            <th>
                                <?php echo $val['file_name']; ?>
                            </th>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>
    <script>
    function deleteFun(id){

    var choice = confirm("Are you sure to delete this item?");

       if (choice) {
           window.location.href = "delete_this_file/"+id;
       }
    }

    <script>

просто попробуйте это, более сведенный к минимуму ответ

RAVI MONE 13 март 2014, в 06:43

Ещё вопросы

Можете ли вы объяснить разницу между «работать хорошо» и «перенаправление»?
работать хорошо означает, что он дает это окно подтверждения перед перенаправлением на удаление контроллера. в другом случае он перенаправляет без предоставления этого окна подтверждения. :)
какое свойство файла вы отправляете контроллеру для удаления файла соответственно?
почему вы хотите сделать так много сложностей, просто добавьте onclick = "somefunction (this.id)" во время итерации, тогда вы можете написать минимизируемую функцию, которая выполняет эту проверку
идентификатор файла в таблице mysql.
Ваш HTML неверен. Тебе не может быть.
@RaviMone - я думал, что это не очень хорошая практика. stackoverflow.com/questions/1687296/...
@putvande - Большое спасибо за указание на это. это была глупая ошибка, которую я сделал.

Shay Elkayam · Accepted Answer · 2014-03-13T05-59-00.000Z

Взгляните на эту ссылку: https://api.jquery.com/on/

метод on свяжет события с динамически создаваемыми объектами

$(document).on("click", ".delete", function() {
    //your code here
});

Когда вы используете обычный addEventListener, он связывает его только с текущими соответствующими элементами в DOM, любой соответствующий элемент, созданный после этой точки, не будет привязан

Дополнительная информация о «делегировании»: api.jquery.com/on/#direct-and-delegated-events
Благодарю вас, миссис Шей Элкаям и мистер Веритас87, с вашей помощью, я могу сделать это правильно. еще раз спасибо