Jquery:Why can'；我不能访问模式中的按钮吗？

我使用jQueryAjax获取引导模式的全部内容。下面是javascript：

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

以下是ajax调用检索到的模式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>

点击我

---

问题是按钮的单击处理程序不起作用。为什么？不管我做什么，我似乎都抓不住它

我认为您需要在输入

数据

中查找按钮，而不是在

文档

中

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

---

我相信您需要在输入

数据

中查找您的按钮，而不是在

文档

中

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

---

由于动态加载

数据

，您需要委派事件：

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

为什么要这样做

---

当动态加载DOM元素时，例如您的case，请求的页面已经为找到的元素以及通过ajax或

document.createElement（）动态添加到DOM中的元素完成了事件注册

等。您需要将事件委托给最近的静态父级或始终可用的

文档

或

文档正文

由于动态加载

数据

，您需要委派事件：

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

为什么要这样做

---

当动态加载DOM元素时，例如您的case，请求的页面已经为找到的元素以及通过ajax或

document.createElement（）动态添加到DOM中的元素完成了事件注册

等。您需要将事件委托给最近的静态父级或始终可用的

文档

或

文档正文

我尝试了你的代码，我已经得到了一个结果

请看这个

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>

---

请注意，我已取消激活要切换模式的行。但是按钮点击事件触发了

我尝试了你的代码，我已经完成了获得结果的过程

请看这个

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>

---

请注意，我已取消激活要切换模式的行。但是按钮点击事件触发了

您可以声明$（'my btn'）。点击（函数（）{console.log（'button was clicked！'）；}）；在ajax代码之外，您可以声明$（'#my btn'）。单击（函数（）{console.log（'Button was clicked！'）；}）；除了ajax代码Hi-Jai之外，这是可行的，但我不明白为什么。当然，我可以随时向元素添加事件处理程序，只要元素在该时间点存在于页面上？@KimPrince您可以看到您没有在DOM中添加数据，而是将数据转换为modal，因为该元素已注册为modal，因此DOM中还不存在。啊！那是洁，现在说得通了。嗨，洁，这很有效，但我不明白为什么。当然，我可以随时向元素添加事件处理程序，只要元素在该时间点存在于页面上？@KimPrince您可以看到您没有在DOM中添加数据，而是将数据转换为modal，因为该元素已注册为modal，因此DOM中还不存在。啊！那是洁，现在说得通了。