Question

问题是我的主页上有各种各样的产品，单击它之后便有一个弹出窗口。模态弹出窗口上有一个“喜欢”按钮。在单击它时，我会触发ajax并填充数据库并关闭它，但是当我打开另一个弹出模型并单击like按钮时，ajax在关闭并打开另一个弹出窗口后同样会触发两次，ajax调用会增加。

单击按钮上的关闭按钮时，我试图使模式HTML变为空白。但是，它不起作用。在主页上

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

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

这是我用来填充数据的容器。

这是类似HTML的图标

<a href="javascript:void(0);" class="vf-item-fullview-icon change">
    <span class="ProductFullView_like lstCng">
    <img src="<?php echo base_url(); ?>assets/blog/feed_image/likeBlack.png" />
    </span> 
</a>

这是点击代码

$(document.body).on('click','.change', 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);
            }
        }
    });

});

Answer 1

尝试在页面加载时解除对click事件的绑定。您可以按以下方式使用解除绑定的方法。

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

Answer 2

尝试如下。每次您打开弹出窗口时，似乎$(document.body).on事件正在绑定。

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

Answer 3

尝试使用off取消绑定事件：

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

Answer 4

请在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);
            }
        }
    });

   });
})

单击功能多次调用

4 个答案: