jquery - fancybox 在 ajax 中无法正常工作

Question

代码已编辑，请查看。我试图在单击链接后使用ajax测试值后显示fancybox，但是fancybox不断消失并永远显示，因为它在循环内有任何解决方案吗？

 $(document).ready(function () {
    $("a.add_to_cart[pro_id]").click(function (e) {
        e.preventDefault();
        var pro_name = $(this).attr("pro_name");
        var pro_id = $(this).attr("pro_id");
        var qst = "?pro=" + pro_id;
        var ajax = false;
        ajax = new XMLHttpRequest();
        ajax.open("get", "ajax/check_exists.php" + qst);
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status == 200) {
                var result = ajax.responseText;
                if (result == 'product in cart') {
                    alert(result);
                } else {
                    $("a.add_to_cart[pro_id=" + pro_id + "]").fancybox({
                        'transitionIn': 'elastic',
                        'transitionOut': 'elastic'
                    }).trigger('click');
                }
            }
        }
        ajax.send(null);
    });
});

Answer 1

您需要取消绑定事件以防止递归点击触发：

$("a.add_to_cart").unbind("click"); 
$("a.add_to_cart").fancybox({
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic' 
}).click();

但是您应该尝试分离元素，因为这会破坏所有元素与您的类unbind的绑定。add_to_cart

尝试设置id而不是设置class元素和选择器，这样只会破坏当前单击元素的绑定。

Answer 2

只需在应用幻想框后立即添加单击：

$("a.add_to_cart").fancybox({
    'transitionIn'  : 'elastic',
    'transitionOut' : 'elastic' 
}).click();