Ajax 在引导模式上多次调用 onclick 事件答案

【问题标题】：Ajax call multiple time onclick event on bootstrap modalAjax 在引导模式上多次调用 onclick 事件
【发布时间】：2014-09-17 02:41:17
【问题描述】：

通过单击一个按钮，它加载了一个引导模式。在模式上有一个表单，点击保存按钮我试图通过 ajax 调用提交表单。第一次ajax调用触发一次，但第二次ajax url触发两次。我在萤火虫控制台部分看到帖子网址被多次调用。

这是我的 jquery 代码。

 $(".show-modal").click(function() {
                    $('.upload-modal').modal();

                    $(".save-logo").click(function(e) {

                        e.preventDefault();
                        $.ajax({
                              type : "POST",
                              data : data,                        
                              contentType: false,
                              cache : false,
                              processData: false, 
                              url : "../../io/upload/"
                        }).done(function(rawData) {
                            $('.modal-header .close').click();

                         })

                    });
             })

【问题讨论】：

标签： javascript jquery ajax twitter-bootstrap bootstrap-modal

【解决方案1】：

问题是您的 .save-logo 点击处理程序位于 .show-modal 点击处理程序中。因此，每次显示模式时，您都会将另一个单击处理程序附加到 .save-logo 元素。下面的代码应该可以解决这个问题：

$(".show-modal").click(function () {
    $('.upload-modal').modal();
});

$(".save-logo").click(function (e) {

    e.preventDefault();
    $.ajax({
        type: "POST",
        data: data,
        contentType: false,
        cache: false,
        processData: false,
        url: "../../io/upload/"
    }).done(function (rawData) {
        $('.modal-header .close').click();

    })

});

【讨论】：

遇到了同样的问题，但 preventDefault() 没有帮助...不得不去 e.stopImmediatePropagation(); 希望有帮助

【解决方案2】：

$(function(){
var editUserId;
$('#edit-user-modal').on('show.bs.modal', function(e) {
    editUserId = $(e.relatedTarget).data('userid');
});
$("#edit-user-form").submit(function(event) {
 
    event.preventDefault();
    var form = $(this);
    var route = "/edit-user/" + editUserId;

    if(validateEditUserForm()){
        $.ajax({
        type: "POST",
        url: route,
        data: form.serialize(), 
        success: function(Response)
        { 
            if(Response){
                console.log(Response.status);
                console.log(Response.message);
                if(Response.status == 'success'){
                    $('#adduser-alert-box').hide();
                    $("#add-user-form")[0].reset();
                    $('#adduser-success-box').show();
                    $('#adduser-success-box').html(Response.message);
                }
                else{
                    console.log('User could not be added');
                    $('#adduser-alert-box').show();
                    $('#adduser-alert-box').html(Response.message);
                }
            }
            else{
                console.log('No Response');
                $('#adduser-alert-box').show();
                $('#adduser-alert-box').html('No Response');
            }
        }
        });
    }
    else{
        console.log('Validation Error');
        $('#adduser-alert-box').show();
        $('#adduser-alert-box').html('Please Fill All the Fields Correctly');
    }


});});

我遇到了同样的问题，我随机尝试了一些东西。因此，如果您创建一个全局变量来存储从按钮传递的“id”，然后存储按钮的“数据”属性中的 id，那么它不会在单击时发出多个请求，因为您已经全局声明了变量！

希望对你有帮助。

【讨论】：