Как создать клик-функцию в модале - PullRequest
Новая
       15

Как создать клик-функцию в модале

0 голосов
/ 03 сентября 2018

Эй, я новичок в js, и я пытался открыть модал начальной загрузки нажатием на кнопку (я установил идентификатор на значение кнопки, потому что идентификатор приходит из базы данных), и если вы нажмете «да» "в этом модале должна быть активирована функция щелчка, которая затем удалит выбранную строку.

Я могу открыть модал, и установка идентификатора также работает, но если я нажимаю кнопку да в модале, оповещение отсутствует ...

Это модал, расположенный в content.html: 

<!--Delete Modal-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="exampleModalLabel">Return Device</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <p><b> Are you sure you want to return this device? </b></p>
                            Please make sure you return the device.
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                <button type="button" class="btn btn-primary delBtn" data-dismiss="modal">Yes</button>
            </div>
        </div>
    </div>
</div>

Это мой JS, расположенный в main.js: 

$(document).ready(function () {

$('#myModal').on('shown.bs.modal', function () {
    $('#myInput').trigger('focus');
});

  $('#booked').click(function () {
    $('#changestuff').load('content.html #booked', function () {
        register();
        change();
        $('.ret').click(function () {
            var id = $(this).val();
            var tr = $(this).closest('tr');
        })
        returnOne(id, tr);
    });

    $('#booked').addClass('active');
    $('#book').removeClass('active');
    $('#admin').removeClass('active');

});
});

function returnOne(id, tr)
{
        $('.delBtn').click(function () {

    alert("you returned" +id);

})
}

Где моя ошибка? Я думаю, что это может быть потому, что модал не был загружен, когда я пытаюсь получить событие click, но я не уверен. Заранее спасибо!

1 Ответ

0 голосов
/ 03 сентября 2018

обработчик события щелчка не присоединяется, возможно, он вызывается до создания кнопки «Да». Попробуйте код ниже, где вы можете сохранить строку для удаления в переменной и установить row-id атрибут данных на кнопку Да. В обработчике нажатия кнопки «Да» прочитайте идентификатор и вы можете удалить строку из переменной rowToDelete

$(document).ready(function(){

    var rowToDelete;

    $('#myModal').on('shown.bs.modal', function(){
        $('#myInput').trigger('focus');
    });

    /*$('#changestuff').load('content.html #book', function(){
        register();
        change();
        getChosenDevices();

    });*/

    $('#changestuff').on('load','content.html #book', function(){
        register();
        change();
        getChosenDevices();

    });

    $('#booked').click(function() {
        $('#booked').addClass('active');
        $('#book').removeClass('active');
        $('#admin').removeClass('active');
    });

    $(document).on('click','.ret',function() {
                var id = $(this).val();
                $('#deleteModal .delBtn').data('row-id', id); //set data id
                rowToDelete = $(this).closest('tr'); //store row in variable
     });

    $(document).on("click", '#deleteModal button.delBtn', function(e) {
        e.preventDefault();
        var rowId = $(this).data('row-id');
        alert("you returned" + rowId);
        $('#deleteModal').modal('toggle');
    });
});

JSFiddle Demo

...