blur, change, keyup

[filch]

Can someone enlighten me as to why this does not work in Safari and only apparently works sometimes and on some machines in IE. I have tried using all three (blur, change, keyup), used live and bind. Nohing seems to work. I have to say though, that in IE on my MAC laptop running Parallels, this script works in IE. However, my client insisted that it does not, and i have verified that in some places and on some machines, it does not work ( at the college where I work for example)

Any help is greatly appreciated.

Dave

$(function() {

    var input = $('<input type="text" name="delegate" id="delegate" />');
    var newFields = $('');
    var input2 = $('<input type="text" name="non_delegate" id="non_delegate" />');
    var newFields2 = $('');
    var input3 = $('<input type="text" name="add_delegate" id="add_delegate" />');
    var newFields3 = $('');


    $('#bv_qty').live('change', function() {
        var n = this.value || 0;
        if (n+1) {
            if (n > newFields.length) {
                addFields(n);
            } else {
                removeFields(n);
            }
        }
    });

$('#mc_qty').bind('blur keyup change', function() {
        var n = this.value || 0;
        if (n+1) {
            if (n > newFields2.length) {
                addFieldsNonMember(n);
            } else {
                removeFieldsNonMember(n);
            }
        }
    });
    
    $('#aw_qty').bind('blur keyup change', function() {
        var n = this.value || 0;
        if (n+1) {
            if (n > newFields3.length) {
                addFieldsAdditional(n);
            } else {
                removeFieldsAdditional(n);
            }
        }
    });

       function addFields(n) {
        for (i = newFields.length; i < n; i++) {
            
                var newInput = input.clone();
                $(newInput).attr({'name': 'delegate' + (i + 1), 'id': 'delegate' + (i + 1)});
                newFields = newFields.add(newInput);
                newInput.appendTo('#memtix');
                
                $("<br class='delegate' />").appendTo('#memtix');
            
        }
    }

    function removeFields(n) {
        var removeField = newFields.slice(n).remove();
        newFields = newFields.not(removeField);
    }
    
    function addFieldsNonMember(n) {
        for (i = newFields2.length; i < n; i++) {
            
                var newInput2 = input2.clone();
                $(newInput2).attr({'name': 'non_delegate' + (i + 1), 'id': 'non_delegate' + (i + 1)});
                newFields2 = newFields2.add(newInput2);
                newInput2.appendTo('#nonmemtix');
                
                $("<br class='delegate' />").appendTo('#nonmemtix');
            
        }
    }

    function removeFieldsNonMember(n) {
        var removeField = newFields2.slice(n).remove();
        newFields2 = newFields2.not(removeField);
    }
    
    function addFieldsAdditional(n) {
        for (i = newFields3.length; i < n; i++) {
            
                var newInput3 = input3.clone();
                $(newInput3).attr({'name': 'add_delegate' + (i + 1), 'id': 'add_delegate' + (i + 1)});
                newFields3 = newFields3.add(newInput3);
                newInput3.appendTo('#additionaltix');
                
                $("<br class='delegate' />").appendTo('#additionaltix');
            
        }
    }

    function removeFieldsAdditional(n) {
        var removeField = newFields3.slice(n).remove();
        newFields3 = newFields3.not(removeField);
    }
    
});​

Dave

[Airshow]

Dave,

On a quick looksee:

var input = $('<input type="text" name="delegate" id="delegate" />');//an instance of jQuery
....
var newInput = input.clone();//also an instance of jQuery
....
$(newInput).attr({'name': 'delegate' + (i + 1), 'id': 'delegate' + (i + 1)});//$(something_that_is_already_an_instance_of_jQuery)...
....
newInput.attr({'name': 'delegate' + (i + 1), 'id': 'delegate' + (i + 1)});//would this make more sense?

However, even if I'm right, it doesn't explain the differences you describe between machines/OS.

Airshow

[Airshow]

What type of element are #bv_qty, #mc_qty and #aw_qty?

[Airshow]

Another thought ....

Google "jQuery memory" and you will find many stories of memory leakage with jQuery.

Maintaining several instances of jQuery simultaneously is certainly going to be memory hungry, so I wonder if you might consider an alternative:

var input = '<input type="text" name="delegate" id="delegate" />';//just on string is required
    var newFields =  [];//new Array();
    var newFields2 = [];//new Array();
    var newFields3 = [];//new Array();

Then, you should be able to handle add and remove with just two functions as follows:

var data = {
        delegate:     { a:newFields,  prefix:'delegate',     elementID:'#memtix' },
        non-delegate: { a:newFields2, prefix:'non_delegate', elementID:'#nonmemtix'  },
        add-delegate: { a:newFields3, prefix:'add_delegate', elementID:'#addmemtix'  }
    };
    function addFields(type, n) {//where type is 'delegate', 'non-delegate' or 'add-delegate'
        var a = data[type].a;
        var prefix = data[type].prefix;
        var elementID = data[type].elementID;
        for (i = a.length; i < n; i++) {
            input = input.replace(/delegate/g, prefix+(i+1));
            a.push(input);//no need to clone as strings are passed by value.
            $(input + "<br class='delegate' />").appendTo(elementID);
        }
    }
    function removeFields(type, n) {//where type is 'delegate', 'non-delegate' or 'add-delegate'
        data[type].a.splice(n, 1);
    }

Note that we work in plain javascript, with $(...) only where it is convenient. You may need to similarly convert any other functions that use newFields, newFields2, newFields3.

I'm pretty certain this will be less demanding of memory.

Airshow

[Airshow]

The code above is untested and will need to be debugged.

For example, properties non-delegate / add-delegate should be non_delegate / add_delegate .

Airshow