Question

您好我有一个JQuery插件，它接受一组Orders并为数组中的每个Order创建行。没问题。但是，如果其中一个订单符合条件，则应在其中一个TD单元格中添加文本框。当我调试时，我可以看到它添加了textBox，但是当创建需要textBox的下一行时，前一个文本框将被删除。我有一个关闭所以不知道该怎么做。所以结果是我只在最后一行得到了文本框。

如果我将textBox添加为html它工作正常，但我想将它作为插件，因为我需要绑定几个事件KeyUp / Down MouseWheel，Click。等等文本框插件控件（gep_inputcontrol）只是创建html并绑定事件，没什么特别的。

任何帮助表示感谢。

var _table = $('#orderTable', this);
for (var i = 0; i < params.orders.length; i++) {
    var row = createRow(params.orders[i]);
    _table.append(row);
}

function createRow(order){
    var unmatchedStake = (order.requestedStake - order.matchedStake);
    var partMatched = (unmatchedStake > 0);


    var tr = $(String.format('<tr id="order_{0}" class="{1}"/>' ,order.orderId, ((i % 2) == 0) ? 'gep-altrow' : 'gep-row'));

            tr.append(String.format('<td class="gep-icon gep-status">{0}</td>', order.orderStatusId));
            tr.append(String.format('<td class="gep-selectionname">{0} {1} {2}</td>', GBEUtils.getEventName(order.eventClassifierFullName()), gep._settings.resources.general.polarity[order.polarityId], order.selectionName()));
            tr.append(String.format('<td class="gep-odds betSlipRowPrice">{0}</td>', order.averageMatchedPrice));
            tr.append(String.format('<td class="gep-unmatched betSlipRowStake">{0}</td>', com.base.formatDecimal(order.requestedStake - order.matchedStake,2)));
            tr.append(String.format('<td class="gep-matched">{0}</td>', com.base.formatDecimal(order.matchedStake,2)));
            tr.append(String.format('<td class="gep-action"><span  class="gep-icon"/></td>', order.orderStatusId));


             //var tablerow = $(String.format('#order_{0}',order.orderId), _table);
            //(function (_table, tr, i, unmatchedStake, tablerow) {
            if(unmatchedStake > 0)//part matched
            {

                $('.gep-unmatched', tr).gep_inputcontrol({
                    type:'STAKE', 
                    ccSymbol:clientObject.state.ccSymbol,
                    value: unmatchedStake,  
                    decimalValue:unmatchedStake,
                    onMouseWheeled: function(e, ev){
                        gep.inputControlWheeled(e, ev);
                        gep.calculateRowProfit(e, false);
                        return false;
                        },
                    onArrowClicked: function(e){
                        gep.onArrowClick(e);
                        return false;
                        }
                    });

                    //$('.gep-unmatched', tr).html($('.gep-unmatched', tr).html());


                $('.gep-odds', tr).gep_inputcontrol({
                    type:'PRICE', 
                    value:order.requestedPrice, 
                    decimalValue:order.requestedPrice,
                    onMouseWheeled: function(e, ev){
                        gep.inputControlWheeled(e, ev);
                        gep.calculateRowProfit(e, false);
                        return false;
                    },
                    onArrowClicked: function(e){
                        gep.onArrowClick(e);
                        return false;
                    }
                    });

                $('.gep-action .gep-icon', tr).addClass("gep-icon-delete");

                $('.gep-icon-delete', tr).bind("click", function(){
                    alert("delete");
                    toggleCurrentBetSlipBet(this);
                    return false;
                });

            }


            // })(_table, tr, i, unmatchedStake, tablerow);

            return tr;

}

textbox插件创建一个带有输入框和两个锚标记的表。

/********************
GEP.gep_inputcontrol // stake input, price input box
********************/
(function ($) {

var _templatePrice = $('<table class="gep-inputcontrol" cellpadding="0" cellspacing="0"><tr><td rowspan="2"><input type="text" size="5" class="gep-inputcontrol-price" /></td><td><a tabindex="-1" href="javascript:void(0);" class="gep-inputup"></a></td></tr><tr><td> <a tabindex="-1" href="javascript:void(0);" class="gep-inputdown"></a> </td></tr></table>');
var _templateStake = $('<table class="gep-inputcontrol" cellpadding="0" cellspacing="0"><tr><td rowspan="2"><span class="gep-ccsymbol" /> <input type="text" size="5" class="gep-inputcontrol-stake" /> </td> <td> <a tabindex="-1" href="javascript:void(0);" class="gep-inputup"></a></td></tr><tr><td> <a tabindex="-1" href="javascript:void(0);" class="gep-inputdown"></a> </td></tr> </table>');
var _template;


var _settings = null;
var _instance;
var methods = {
    init: function (options) {
        _settings = options;
        //options.type = 'STAKE'or 'PRICE'

        _template = (options.type == 'STAKE')? _templateStake: _templatePrice;

        $('.gep-ccsymbol',_template).html(options.ccSymbol);




        this.html(_template);
        $('input', this).attr('value', options.value);
        $('input', this).attr('initialvalue', options.decimalValue);
        $('input', this).attr('decimalValue', options.decimalValue);


        $('input', this).bind("mousewheel", function (ev) {
            _settings.onMouseWheeled.call(null, this, ev.originalEvent);
        });      

        $('.gep-inputup', this).bind("click", function (e) {
            _settings.onArrowClicked.call(null, this);
        });            
        $('.gep-inputdown', this).bind("click", function (e) {
            _settings.onArrowClicked.call(null, this);
        });


        _instance = this;
        return this;

    },
    show: function (params) {
        alert("show" + params);
    },
    hide: function () {
        // GOOD
    },
    update: function (content) {
        // !!! 
    }
};

$.fn.gep_inputcontrol = function (method) {

    // Method calling logic
    if (methods[method]) {
        return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return methods.init.apply(this, arguments);
    } else {
        $.error('Method ' + method + ' does not exist on jQuery.gep_inputcontrol');
    }

};

})(jQuery);

为了详细说明，我做了一些小单元测试

这有效..

$('.gep-odds', clientObject.liveBetsPane).gep_inputcontrol({
        type: 'PRICE',
        value: 5,
        decimalValue: 5,
        onMouseWheeled: function (e, ev) {
            gep.inputControlWheeled(e, ev);
            gep.calculateRowProfit(e, false);
            return false;
        },
        onArrowClicked: function (e) {
            gep.onArrowClick(e);
            return false;
        }
    });

这不起作用......（只在最后一行放置TEXT框）但我需要这样做，因为我需要每行的值。

$('.gep-odds', clientObject.liveBetsPane).each(function () {
    $(this).gep_inputcontrol({
        type: 'PRICE',
        value: 5,
        decimalValue: 5,
        onMouseWheeled: function (e, ev) {
            gep.inputControlWheeled(e, ev);
            gep.calculateRowProfit(e, false);
            return false;
        },
        onArrowClicked: function (e) {
            gep.onArrowClick(e);
            return false;
        }
    });
});

Answer 1

我从模板中删除了美元并且工作正常。

var _templatePrice = $('<table cla...

现在是 var _templatePrice ='＆lt; table cla ...

虽然它为最后一行设置了html，但它正在为其他行移动。

感谢我...... :)

无法在循环中添加Jquery插件

1 个答案: