Jquery 事件未定义 - 甚至获取被单击元素的属性

Question

我有一个“默认模板”，我在正文上加载了一些 View (使用 codeigniter)

在这些 View 之一中，我有一个表，其中有一些像这样的 td:

<td data-target="#VRModal" data-id="2" data-toggle="modal"><a href="#">Details</a></td>

在此 View 的底部我有一个 Bootstrap 模式

<div id="VRModal" class="modal fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;<span class="sr-only">Close</button>
            <h4 class="modal-title" id="myModalLabel">Details</h4>
        </div>

        <div id="orderDetails" class="modal-body"></div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
    </div>
</div>

JavaScript:

                $('#VRModal').modal({
                keyboard: true,
                backdrop: "static",
                show:false

            }).on('show.bs.modal', function(){
                var id = $(event.target).closest('td').data('data-id');
                var url = '<?= site_url() ?>/' + '<?= $this->uri->uri_string() ?>/'+id;
                $.ajax({                        url: url,
                    dataType: 'html',
                    success: function(html)
                    {
                        $('#orderDetails').html(html)
                    }
                });
            });
        });

除了“var id”行之外，一切正常

在控制台上出现此错误:

ReferenceError: event is not defined

Answer 1

使用这个:

var id = $(event.target).closest('td').attr('data-id');

更新:看来你的代码也有一些语法错误。尝试将其作为完整代码:

$('#VRModal').modal({
    keyboard: true,
    backdrop: "static",
    show:false
});

$('#VRModal').on('show.bs.modal', function(e){
    var id = $(e.relatedTarget).closest('td').attr('data-id');
    alert(id);
    var url = '<?= site_url() ?>/' + '<?= $this->uri->uri_string() ?>/'+id;
    $.ajax({
        url: url,
        dataType: 'html',
        success: function(html)
        {
            $('#orderDetails').html(html)
        }
    });
});

<强> Check JSFiddle