无法在循环内添加Jquery插件

Question

Hi I have a JQuery plugin that takes an array of Orders and creates rows for each Order in the array. No issues here. However if one of these Orders meets a condition it should add a textbox in one of the TD cells. When I debug I can see it adding the textBox but when the next row is created which requires a textBox the previous textbox gets removed. i have this inside a close so not sure what to do. So the result is I only get textboxes in the last row.

If I add the textBox as html it works fine but I want it as a plugin as I need to bind several events KeyUp/Down MouseWheel, Click. etc The textbox plugin control (gep_inputcontrol) just creates the html and binds events, nothing fancy.

Any help appreciated.

---

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;

}

The textbox plugin creates a table with input box and two anchor tags.

/********************
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);

To elaborate a bit more, I did some small unit tests

This works..

$('.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;
        }
    });

This does NOT work...(Only puts TEXT box in last row) But I need to do it this way as I need values of each row.

$('.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

I removed dollar from the template and it worked fine.

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

is now
var _templatePrice = '<table cla...

Although it sets the html for the last row it was moving for the other rows.

Thanks to me.... :)