我的javascript单击事件在第二次单击时运行，而不是在第一次单击时运行

Question

function loadToFalloutPopup() {
    $('#fallout-all-modal').modal({
        backdrop: true,
        keyboard: true
    });
}

$document.on('click', '.all-fallout-btn', loadToFalloutPopup)
});

Html：

<button type="button" class="all-fallout-btn" data-dismiss="modal">To Fallout</button>

JQuery单击事件在第二次单击时触发，而不是在第一次单击时触发。我不知道是怎么回事，请帮帮忙。

Answer 1

试试这个：

function loadToFalloutPopup() {
    $('#fallout-all-modal').modal({
    backdrop: true,
    keyboard: true
    });
}
$(document).ready(function() { // always write any event on $(document).ready
    $(document).on('click', '.all-fallout-btn', function() { // use click event like this
        loadToFalloutPopup();
    });
})

Answer 2

尝尝这个

​

$(document).on('click', '.all-fallout-btn', function(){
loadToFalloutPopup()
});

var count=0
function loadToFalloutPopup() {
    count++
    $('#spanCount').text(count);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" class="all-fallout-btn" data-dismiss="modal">To Fallout</button><br/><span id='spanCount'>0</span>

​