1

我正在开发一个应用程序，我在其中使用 ajax 调用加载内容。但在某些情况下，我在循环中收到了 ajax 调用，但它以随机迭代结束。下面是从双击事件到最终 ajax 调用的顺序代码。

//I use the double click event to fire the function
$('.item-container').on('click', '.item', function(e) {
    var posX = e.pageX;
    var posY = e.pageY;
    var element = $(this);
    var that = this;
    setTimeout(function() {
        var dblclick = parseInt($(that).data('double'), 10);
        if (dblclick > 0) {
            $(that).data('double', dblclick-1);
        } else {
            showToolTip(posX,posY,element);
        }
    }, 300);
}).on('dblclick', '.item', function(e) {
    $(this).data('double', 2);
    addItemsToBill(this);
});


function addItemsToBill(selectedItem) {


var element = null;

$(".bill-item-list").each(function() {
    if ($(this).css("display") == "block") {
        element = $(this);
        return;
    }
});

if (element == null) {
    getSystemMessage(BILL_SELECT_VALIDATION_MSG);
    return;
}

if ($('#open-tab .bill-list').find(".bill-item-list").length == 0
        && $(element).find('.bill-item').length == 0) {
    getSystemMessage(BILL_SELECT_VALIDATION_MSG);
    return;
}

var bill = $('.sample-elements').find('.bill-item');
var clone = bill.clone();
var itemId = $(selectedItem).attr('id');
var billId = $(element).parent().attr('id');

if ($(selectedItem).attr('isopen') == '1') {

    $('.open-item-popup-overlay').lightbox_me( {
        centered : true,
        destroyOnClose : false,
    });

    $('.itmRate').val('');
    $('#itmAmt').html('0.00');
    $('.itemQty').text('1');

    $('.itm-cancel').click(function() {
        $('.open-item-popup-overlay').trigger('close');
    });

            //when the first run goes it's fine, bt after that, the looping starts from here. I double checked whether there is another code segment which fires this but there are none.
    $('.itm-ok').click(function(){
        if ($('.itmRate').val() == "") {
            getSystemMessage(AMOUNT_INPUT);
            return;
        }
                    //This function gets iterated multiple times if I run the same event for multiple times.
                    //The function is only used in this two locations and no any other places.
        billItemDrop(itemId, billId, clone, selectedItem, null,element, 1, true);
        return false;
    })

} else {
    billItemDrop(itemId, billId, clone, selectedItem, null, element, 0,true);
}
}

function billItemDrop(itemId, billId, billItemClone, doubleClickedItem,draggableHelper, catchElement, isOpen, isDoubleClick) {

var openItemQuantity =  stringToDouble($('.itemQty').val());
var openItemRate = stringToDouble($('.itmRate').val());
var openItemAmount = openItemQuantity * openItemRate;

var ajaxObject = 'itemId=' + itemId + '&billId=' + billId + '&qty='
        + openItemQuantity + '&rate=' + openItemRate + '&openItem='
        + isOpen;

ajaxCall(ADD_ITEM_TO_BILL,AJAX_POST,ajaxObject,function(response) {

            var responseObject = response.billDetail;
            var billTotal = responseObject.billTotal;

            var total = response.billDetail.rate * response.billDetail.qty;

            // Add Items to the bill failed
            if (response.status != "success") {
                getSystemMessage(ADD_ITEM_TO_PRINTED_BILL);
                return;
            }

            billItemClone.attr('itemId', responseObject.itemId);
            billItemClone.attr('billDetailId', responseObject.billDetailId);

            billItemClone.find('.bill-item-name').text(
                    responseObject.itemName);
            billItemClone.find('.bill-item-rate span').text(
                    responseObject.rate.toFixed(2));
            billItemClone.find('.bill-item-amount').text(
                    total.toFixed(2));
            billItemClone.find('.bill-item-qty span').text(responseObject.qty);

            if (responseObject.kotBotNo != null) {
                billItemClone.find('.kot-bot-num').text(
                        responseObject.kotBotNo);
            }

            billItemClone.draggable( {
                revert : false,
                addClasses : false,
                zIndex : 1,
                containment : "window",
                opacity : 0.5,
                cursor : "move",
                scroll : false,
                helper : function() {
                    return $(this).clone().appendTo('body').show();
                }
            });

            if (isDoubleClick == true
                    && (doubleClickedItem != undefined
                            || doubleClickedItem != null || doubelClickedItem != "")) {
                billItemClone.find('.bill-item-img img').attr('src',
                        $(doubleClickedItem).css('background-image'));
            } else if (isDoubleClick == false
                    && (draggableHelper != undefined
                            || drdraggableHelper != null || draggableHelper != "")) {
                billItemClone.find('.bill-item-img img').attr('src',
                        draggableHelper.css('background-image'));
            }

            if (catchElement.height() > 300) {
                catchElement.css('overflow-y', 'scroll');
                catchElement.css('height', '320px');
            }

            if (catchElement.find('.bill-item').length == 0) {
                billItemClone.insertBefore(
                        catchElement.find('.item-drop-point')).hide()
                        .fadeIn("slow");
            } else {
                billItemClone.insertBefore(
                        catchElement.find('.bill-item').first()).hide()
                        .fadeIn("slow");
            }

            catchElement.parent().find('.amount')
                    .html(billTotal.toFixed(2));

            if (draggableHelper != undefined || draggableHelper != null) {
                draggableHelper.hide('fade', function() {
                    draggableHelper.remove()
                });
            }

            $('.item-drop-point').removeClass('item-drop-hover');

        },false);
}

/**
 * 
 * Function for ajax calls - url : webservice url - type : ajax call type - data :
 * data that needs to be passed - callback : function that needs to be executed
 * 
 * when ajax call succeed
 * 
 * @param url
 * @param type
 * @param data
 * @param callback
 */
function ajaxCall(url, type, data, callback,async){

// Assign default value to async if its not specified
if (async===undefined) async = true;

$.ajax({
    url: url,
    type: type,
    data: data,
    dataType : "json",
    cache: false,
    beforeSend: function(x){
    if(x && x.overrideMimeType){
        x.overrideMimeType("application/json;charset=UTF-8");
        }
    },
    async : async,
    success:callback
});
}

该函数被迭代，因此 ajax 调用也被迭代。我使用断点来跟踪迭代，但是从单击事件的点开始，我无法找到在第一次单击事件之后触发它的位置。代码中是否有任何错误导致函数迭代。请帮忙。

4

1 回答 1

0

每次您打电话时，addItemsToBill(this);您都在添加新的事件处理程序$('.itm-ok')

Try removing the call to billItemDrop(itemId, billId, clone, selectedItem, null,element, 1, true); and replacing it with a console.log('Test' If you find that multiple console logs are being made every time you click the issue is that every click is being handled by multiple handlers. If that is the case and you really want to use this structure you will have to unbind you click handler before rebinding it.

$('.itm-ok').off('click')
$('.itm-ok').on('click',function(){
        if ($('.itmRate').val() == "") {
            getSystemMessage(AMOUNT_INPUT);
            return;
        }
                    //This function gets iterated multiple times if I run the same event for multiple times.
                    //The function is only used in this two locations and no any other places.
        billItemDrop(itemId, billId, clone, selectedItem, null,element, 1, true);
        return false;
    })
于 2013-09-05T11:24:37.280 回答