Question

我的页面中有这行代码：

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

这一行实际上是一个bootstrap模式。我希望当用户点击它时，我想要克隆它上面的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>

Answer 1

尝试事件委托 - 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');
    });

});

Answer 2

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

使用$(document).ready函数尚未准备好模态。弹出时它就会变好。可能背后的原因（虽然我不确定）。它对我有用，这就是我发布答案的原因。

Answer 3

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

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

Answer 4

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

Answer 5

我希望它只是一个拼写错误，但你在id属性之前有一个双引号，就在一个标签之后。在代码的第一部分，它没关系。

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

它可能搞砸了......

Answer 6

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

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

这与预期一样有效。

Answer 7

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

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

JQuery click事件在bootstrap模式中不起作用

7 个答案: