点击jquery上的按钮问题

Click on button issue on jquery

本文关键字：按钮 问题 jquery 点击      更新时间：2023-09-26

我需要单击两次按钮 id '#a' 才能在我的控制台上显示控制台.log('A')。但是一旦你已经点击了两次，那么成功的点击就已经起作用了。我不明白为什么第一次尝试需要单击两次才能正常运行。任何帮助

<div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="myModalAdd" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalAdd">Add Category <small>&raquo; Category</small></h4>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
                <div id="container-option-add"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary btn-sm" id="a">Submit</button>
            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
        </div>
    </div>
</div>


$('#addData').on('click', function() {
    $(this).find('#a').off().on('click', function () { 
        console.log('A');
    });               
}).modal();

因为第一次单击该按钮时，您只是在注册事件侦听器，这意味着您之前没有侦听器，因此您的代码不会执行。

你必须这样做（jsFiddle）： 

$('#addData').on('click', function() {
    if($(event.target).is("#a")){
        console.log('A');
       }
});

当你第一次点击按钮（或者至少看起来点击它）时，

此时事件处理程序未附加到按钮，因此 console.log（） 不会触发。

然后，在本例中，该事件会冒泡到父#addData，并触发该div的单击事件。

现在，事件处理程序附加到按钮。

因此，下次单击该按钮时，事件处理程序将开始工作。

注意：该事件仍将继续传播到父级#addDatadiv。

这应该给你一个公平的想法

而不是嵌套的点击处理程序以这样的方式思考它，

function A(){
    $("#a").off().on("click", function(){
        //do Something
    });
}

现在

在您呼叫 A() 之前，不会附加按钮的.on('click')。

将其等同于您的代码，

$("#addData").on("click", function(){
    A();
});

希望能:)回答您的问题虽然，我强烈建议您不要像现在这样嵌套事件处理程序。

这可能有效！我得到了答案

$('#addData').on('show.bs.modal', function() {
   $(this).find('#a').off().on('click', function () { 
      console.log('A');
   });               
}).modal();
相关文章：