javascript - 点击模态确定按钮时，按模态使用次数触发点击，无需刷新页面

Question

当我点击“点击”按钮时触发点击，我统计了一下，发现它与点击次数相等，说明我点击了它而没有刷新页面。仅当我不刷新页面时才会出现此问题。我对整个网站使用一种模式，但每次使用后我都会刷新页面，这样就不会出现此问题。

这是js文件

   var modal = $j('#generalModal');

        var modalBody = '<div style="margin-top: 20px;">'+
            '<div>'+
                '<label for="AgentID" class="control-label">المندوب</label>'+
                '<span id="AgentDropDown"></span>'+
                '<input type="hidden" name="AgentID" id="AgentID">'+
            '</div>'+
        '</div>';

        modalForm(modal, "تغيير المندوب", modalBody);
        modal.modal('show');


        $j('#AgentDropDown').select2({  
            ajax: {
                url: 'ajax_combo.php',
                dataType: 'json',
                cache: true,
                data: function(term, page){ return { s: term, p: page, t: 'clients', f: 'agent_id' }; },
                results: function(resp, page){ return resp; }
            },
            width: 400
        }).on('change', function(e){
            $j('#AgentID').val(e.added.id);
        });


        $j("#change").on("click", function(){
            console.log('click');
            var agent = $j('#AgentID').val();
            var agent_name = $j('#s2id_AgentDropDown > a > span.select2-chosen').text();
            // ajax request
            if(agent_name){
                $j.ajax({
                    url: 'hooks/ajax-update-agent.php',
                    type: 'POST',
                    data: {'ids': ids, 'agent': agent, 'tableName': tableName},
                }).done(function() {

                    /* change the agent for ids */

                    for(var i=0; i<ids.length; i++){
                        console.log(agent_name);
                        $j('#payments-agent_id-'+ids[i]+' > a').text(agent_name);
                    }

                    /* show message for two seconds */
                    show_msg(modal, '<div class="alert alert-success" role="alert"><i class="glyphicon glyphicon-info-sign"></i>  <strong>تم تغيير المندوب بنجاح</strong></div>');

                    setTimeout(function (){
                        /* close modal by triggering an event */
                        $j('[data-dismiss="modal"]').trigger('click');
//                        modal.modal('hide');
//                        modal.modal('toggle');
                    }, 2000);

                }).fail(function(){
                        /* modal error */
                        show_msg(modal, '<div class="alert alert-error" role="alert"><i class="glyphicon glyphicon-info-sign"></i>  <strong>حدث خطأ اثناء تغيير المندوب</strong></div>', true);
                });

            }
        });


function modalForm(modal, title, body){
    modal.find('.modal-title').text(title);
    modal.find('.modal-body').empty().append(body);
    modal.find('.modal-footer').show();
}


function show_msg(modal, body, withFooter){
    if(typeof withFooter == 'undefined') withFooter=false;
    if(!withFooter){
        modal.find('.modal-footer').hide();
    }
    modal.find('.modal-body').empty().append(body);
}

这是 html 页面

<!-- agents Modal  -->
<div class="modal fade" id="generalModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h2 class="modal-title"></h2>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>
        <button type="button" class="btn btn-primary" id="change">إستمرار</button>
      </div>
    </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我应该怎么做才能解决这个问题？提前致谢

Answer 1

通常，当通过调用函数在元素上多次调用 click 处理程序时，就会发生这种情况。也许尝试解除绑定(bind)并重新绑定(bind)事件，就像这样

$("#change").off('click').on('click');

这将清除之前的所有点击事件并分配一个新事件。希望这有效!