Ajax在bootstrap模式上调用多次onclick事件

Question

通过单击按钮它加载了一个bootstrap模式.在模态上有一个表单和单击保存按钮我试图通过ajax调用提交表单.第一次ajax调用触发一次,但第二次ajax url触发两次.我在firebug控制台部分看到post 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();

                         })

                    });
             })

Answer 1

问题是你在.show-modal点击处理程序中有你的.save-logo点击处理程序.因此,每次显示模态时,都会将另一个单击处理程序附加到.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();

    })

});