Jquery 多次单击调用的函数

问题是我的主页上有各种各样的产品，点击后会弹出一个窗口。模式弹出窗口上有一个like按钮。单击它，我启动ajax并填充数据库并关闭它，但是当我打开另一个弹出模型并单击like按钮时，ajax在关闭和打开另一个弹出窗口后启动两次，ajax调用会增加

我试图在单击关闭按钮时将模式html设置为空白。但是，它不起作用。 在主页上

    <div class="container">
            <div class="prod_detail">
                <div class="modal fade" id="prod_viewd" role="dialog">

                </div>
            </div>
    </div>

---

每当页面加载时，请尝试取消绑定click事件。可以使用以下取消绑定方法

$(document).unbind('click');

---

试试下面的方法。似乎每次打开弹出窗口时，上的

$（document.body）.on事件都会被绑定

$(document.body).off('click','.change');
$(document.body).on('click','.change', function(e) {  
    // Your code
});

尝试使用“关闭”解除事件绑定：

$('.commonClose').off('click').click(function(e) {  
    $('.prod_vbody').html('');
})

请在document.ready函数中添加您的函数

$(document).ready(function(){
   $('.change').on('click', function(e) {  
    alert('clicked');
    $.ajax({
        url: base_url + 'Like',
        type: 'POST',
        data: "product_id=" + $('#product_id').val() + "&from=product",
        dataType: "json",
        success: function (response)
        {
            if (response.exists == "1")
            {
                //$('#success_wish').html(response.message);
                //$('#success_wish').show("slow");
                // $('.hello').attr('src', swap).attr("data",current);
                $(".product_like_li").html(response.likeText);
                window.setTimeout(function () {
                    $('#success_wish').hide("slow")
                }, 3000);
            }
            if (response.exists == "2")
            {
                //$('#success_error').html(response.message);
                //$('#success_error').show("slow");
                window.setTimeout(function () {
                    $('#success_error').hide("slow")
                }, 3000);
                window.setTimeout(function () {
                    window.location.href = base_url + 'Login'
                }, 3000);
            }
            if (response.exists == "0")
            {
                $('#success_error').html(response.message);
                $('#success_error').show("slow");
                window.setTimeout(function () {
                    $('#success_error').hide("slow")
                }, 3000);
            }
        }
    });

   });
})

我认为问题来自您命名元素的方式。可能有多个元素具有相同的类名。这就是：我是这样做的，但为什么呢？@T–nNguyễn我已经检查过了，我想当我点击打开模态时，模态实例的数量=调用的ajax的数量您的示例代码还不足以理解，也许这与您如何添加事件侦听器有关……您是否可以显示您的html或更好地为iti制作一个提琴我建议在页面加载时绑定一个click函数
$('.commonClose').off('click').click(function(e) {  
    $('.prod_vbody').html('');
})

$(document).ready(function(){
   $('.change').on('click', function(e) {  
    alert('clicked');
    $.ajax({
        url: base_url + 'Like',
        type: 'POST',
        data: "product_id=" + $('#product_id').val() + "&from=product",
        dataType: "json",
        success: function (response)
        {
            if (response.exists == "1")
            {
                //$('#success_wish').html(response.message);
                //$('#success_wish').show("slow");
                // $('.hello').attr('src', swap).attr("data",current);
                $(".product_like_li").html(response.likeText);
                window.setTimeout(function () {
                    $('#success_wish').hide("slow")
                }, 3000);
            }
            if (response.exists == "2")
            {
                //$('#success_error').html(response.message);
                //$('#success_error').show("slow");
                window.setTimeout(function () {
                    $('#success_error').hide("slow")
                }, 3000);
                window.setTimeout(function () {
                    window.location.href = base_url + 'Login'
                }, 3000);
            }
            if (response.exists == "0")
            {
                $('#success_error').html(response.message);
                $('#success_error').show("slow");
                window.setTimeout(function () {
                    $('#success_error').hide("slow")
                }, 3000);
            }
        }
    });

   });
})