我究竟做错了什么？ 我正在尝试克隆一些字段并使用一些函数

Question

I am building a form where a select menu is cloned and appended. In each clone there is a jQuery drop-down selector that I have created a function called unitClone that you can see towards the end of the JavaScript code.

unitClone = function(input) {
    var id = $('#' + input + ' .unit_select').attr('id');
    var id = ('#' + id);
    //alert(id);
    dd = new Select($(id));
    var selected = $(id).closest('td').find('.ingredient_unit').val();
    if (selected != null) {
        var selected = $(id).find(".dropdown li a[data-id=" + selected + "]").html();
        $(id).find('span').text(selected);
    }
}

For some reason the code is not working properly, the first item does not allow me to click and select and the third item allows me to select but the same value is used for all the drop-downs.

Any help would be greatly appreciated.

Here is my code:

http://jsfiddle.net/tlaverdure/nKrvh/

Answer 1

I change the on method in your js code to live and everythings work fine

Select.prototype = {
    initEvents: function() {
        var obj = this;
        obj.dd.live('click', function(event) {
            $(this).toggleClass('active');
            return false;
        });
        obj.opts.live('click', function() {
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            var num = $(this).closest('td').find('.num');
            var numVal = $(this).closest('td').find('.num').val();
            if (numVal > 1) {
                obj.val = obj.val + 's'
            }
            obj.placeholder.text(obj.val);
            obj.opt_id = opt.find('a').data('id');
            $('.recipe_difficulty').val(obj.opt_id);
        });
    },
    getValue: function() {
        return this.val;
    },
    getIndex: function() {
        return this.index;
    }
}

Here is the edited code.

Good luck

Answer 2

Found a fix. .live was not working out.

obj.dd.toggle(function() {
        selectArea = $(this).attr('id');
        $('#'+ selectArea).addClass('active');
        return false;
        },
        function(){
            selectArea = $(this).attr('id');
                $('#'+ selectArea).removeClass('active');
             return true;
    });

http://jsfiddle.net/tlaverdure/nKrvh/3/