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

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(){...});

Modal沒有准備好使用$(document).ready函數。 彈出時它就會變好。 可能背后的原因（雖然我不確定）。 它對我有用，這就是我發布答案的原因。

Answer 3

我希望這對你有所幫助。 我有同樣的問題，我只是在Jquery點擊事件中添加了模態ID，它對我有用。 試試這個

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

Answer 4

這不是一個真正的答案，但它“神奇地”解決了這個問題。 我將該頁面的代碼移動到另一個.js文件，它工作正常。 前一個文件鏈接到許多頁面。 我猜這是問題的根源。 雖然看起來很奇怪。

Answer 5

我的猜測是你的元素在jQuery.ready事件之后被添加到頁面中。 你的代碼在那個區塊中嗎？

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

Answer 6

我希望它只是一個拼寫錯誤，但你在id屬性之前有一個雙引號，就在一個標簽之后。 在代碼的第一部分，它沒關系。

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

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

Answer 7

我不小心在不同的模態對話框中為兩個不同的按鈕分配了相同的id屬性。 更改此問題解決了問題：

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

這與預期一樣有效。