Question

我正在使用jQuery ajax来获取Bootstrap模式的全部内容。这是javascript：

$.get('/user/modal', {
    id : datum.id
}).done(function (data) {
    $(data).modal('toggle');
    $('#my-btn').click(function () {
        console.log('Button was clicked!');
    });
});

这是模式html，由ajax调用检索：

<div class="modal fade temp-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" id="my-btn">Click Me</button>
            </div>
        </div>
    </div>
</div>

问题是该按钮的点击处理程序不起作用。为什么？无论我做什么，我似乎无法掌握它！

Answer 1

当动态加载data时，您需要委派事件：

$(document).on('click', '#my-btn', function () {

为什么要这样做？

当动态加载DOM元素时，例如 ，请求的页面已经完成了找到的元素的事件注册 以及动态添加到DOM的元素您可以通过ajax或document.createElement()等方式将事件委托给最近的静态父级或始终可用的document或document.body。

Answer 2

我认为您需要在data范围内查找document中的按钮。

$.get('/user/modal', {
    id : datum.id
}).done(function (data) {
    $(data).modal('toggle');
    $(data).find('#my-btn').click(function () {
        console.log('Button was clicked!');
    });
});

Answer 3

我尝试了你的代码而且我已经完成了结果

请参阅此fiddle

<强> HTML

<div class="modal fade temp-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" id="my-btn">Click Me</button>
            </div>
        </div>
    </div>
</div>

使用JQuery 2.2.2

JS

$.get('/').done(function (data) {
    //$(data).modal('toggle');
    $('#my-btn').click(function () {
        console.log('Button was clicked!');
    });
});

请注意，我想要切换你要切换模态的行。但触发按钮点击事件

Jquery：为什么我无法访问模态中的按钮？

3 个答案: