JQuery单击事件在引导模式中不起作用答案

【问题标题】：JQuery click event not working in bootstrap modalJQuery单击事件在引导模式中不起作用
【发布时间】：2014-03-04 17:31:04
【问题描述】：

我的页面中有这行代码：

<div id='data'>...</div>      
<a id='addMore' href='#'>Add more </a>

这一行实际上是在引导模式中。我希望当用户单击它时，我希望克隆它上面的 div。问题不在于克隆的代码，而是甚至没有引发 click 事件。在我的 .js 文件中，我有这个：

$('#addMore').click (...)

省略号是用于防止默认值和克隆的代码。我尝试使用警报进行测试。它仍然没有工作。我不知道为什么。

我发现如果我在标签中添加onClick='alert(...)，它会起作用。

谁能帮忙？

这是模态的 HTML（如果有人帮助格式化，我不介意。我知道这是一团糟）：

<div id="addEmailModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addEmailLabel" aria-hidden="true">   
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times; </button> 
        <h3 id="addEmailLabel">Add Email</h3>
    </div>
    <div class="modal-body">
        <div id="emailData">
            <input type="text" placeholder="Name (optional)" class="input-xlarge" />
            <input type="email" placeholder="Email" />
        </div>
        <a id="addMore" href="#">Add more&hellip;</a>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="btnAdd">Add</button>
    </div>
</div>

【问题讨论】：

@StephenRios 代码中有一个函数。我觉得没有必要写它，因为事件是问题，而不是功能
您是否在控制台中看到任何错误？文档就绪处理程序中有 jQuery 代码吗？
@Barmar 如果这是原因，那么一定是一些奇怪的事情发生了，因为其他 jQuery 代码正在工作。另外，bootstrap 使用的是 jQuery，所以应该不会有冲突。
@Jay 这正是我尝试过的最后一段代码。它不工作。
页面中是否有多个具有 addMore id 的元素？

标签： javascript jquery bootstrap-modal

【解决方案1】：

$(document).on('click', '#addMore', function(){...});

Modal 没有准备好 $(document).ready 函数。当它弹出时它就准备好了。这就是背后的原因。

【讨论】：

你能补充一些为什么这应该有效的细节吗？纯代码答案不是很有用，可能会被删除。
更多细节会有所帮助。不过，这种方法纠正了我的问题。
我相信我知道为什么会这样，（它确实纠正了我的问题）。通过在文档上绑定一个点击事件，每次您在任意位置单击页面时，都会刷新其 DOM 列表，这意味着在文档发送就绪代码之后添加的任何内容现在都可用于on()。然后使用中间参数指定在document.ready() 结束后添加的id/class。
您可以使用模态 ID 而不是文档，如下所示：$('#modal-Id').on('click', '#addMore', function(){...});
感谢您提醒我有关此语法的信息。这真的很奇怪，有时$("button[id^='dismissDtModal_']").on('click', function(event) {... 工作正常，而其他时候，我必须使用$(document).on('click', "button[id^='dismissCmNotFound_'][id$='_Modal']", function (event) {... 我希望我能更好地理解为什么，尤其是当这两个都用于处理“关闭”按钮的点击时在 BS 模态对话框中。

【解决方案2】：

尝试事件委托 - jQuery 的 .on() 方法。

如果事件不起作用，可能是因为您的标签 <a id='addMore' href='#'>Add more </a> 是在页面加载后添加的。您可以使用他的父容器捕获事件（注意：页面加载时父容器应该已经存在于 DOM 中）。试试这个：

$(document).ready( function () {
    //Search the parent class, id, or tag and then try to find the <a id="addMore"></a>  as a child
    $('.parent #addMore').on('click', function () {
        alert('addMore click event');
    });
    //Try too with the specific tag
    $('a#addMore').on('click', function () {
        alert('addMore click event');
    });
    //And try too with the specific tag
    $('a #addMore').on('click', function () {
        alert('addMore click event');
    });

});

【讨论】：

这对我有用，虽然在我的情况下，页面加载后标签没有加载。事件委托不应该解决我的问题，但确实如此。 “我的任务不是推理；我的任务是撬和撬。” - 林恩约翰斯顿
您知道，有时要找到问题的解决方案，我们必须越来越深入地寻找原因。我很高兴这个解决方案对您有所帮助。

【解决方案3】：

我希望这会对您有所帮助。我有同样的问题，我只是在 Jquery 点击事件中添加了模态 ID，它对我有用。试试这个

$('#addEmailModal #addMore').click (...)

【讨论】：

【解决方案4】：

这并不是真正的答案，但它“神奇地”解决了问题。我将该页面的代码移到了另一个 .js 文件中，它可以正常工作。前一个文件链接到许多页面。我想这就是问题的根源。不过看起来很奇怪。

【讨论】：

【解决方案5】：

我的猜测是您的元素是在jQuery.ready 事件之后添加到页面中的。你的代码在那个区块里吗？

$( document ).ready( $('#addMore').click (...) )

【讨论】：

很抱歉您的猜测是错误的。 HTML 已经在页面上。这是一个引导模式。

【解决方案6】：

我希望这只是一个错字，但您在 id 属性之前有一个双引号，就在 a 标记之后。在代码的第一部分，虽然没问题。

 <a" id="addMore" href="#">Add more&hellip;</a>

它可能会把事情搞砸......

【讨论】：

【解决方案7】：

我不小心将相同的 id 属性分配给了不同模式对话框中的两个不同按钮。改变这个解决了这个问题：

$(document).ready(function((){/*assign click to modal dialog buttons...

这正如预期的那样工作。

【讨论】：