Question

嘿，我是js的新手，我想通过单击按钮来打开引导模式（我将id设置为按钮的值，因为该id来自数据库），如果您单击“是“在该模式下，应触发一个点击功能，然后应删除所选行。

我能够打开模式并设置id也可以，但是如果我单击模式中的“是”按钮，则不会发出警报...

这是位于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>

这是位于main.js中的我的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事件时尚未加载模式，但我不确定。预先感谢！

Answer 1

click事件处理程序未附加，可能是在创建yes按钮dom之前被调用了。尝试下面的代码，在其中可以将要删除的行存储在变量中，并在“是”按钮上设置row-id数据属性。在“是”按钮的单击处理程序中，读取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

如何在模式中创建点击功能

1 个答案: