jQuery selector "memory"

Question

I have a form with multiple fields, and each time the user changes a field the form is submitted (via hidden iframe), and the response is placed within an appropriate div on the page via a callback. The first time this works fine. But on each subsequent field change and submission, the response is shown in every div that has been filled with a response (so they all show the same thing, not the desired behavior).

Can anyone tell me why this is happening? It seems that there is some retention of the selectors that have been called before (since last page load)... but I'm not sure. Here's my code:

$(function ()
{
    $('#ImageAddForm input').change(function (){
        form = $('#ImageAddForm');

        var fldDiv = $(this).parent().attr('id'); // eg Image11
        var thDiv = fldDiv.replace('Image', 'Thumb'); // eg Thumb11

        $(form).iframePostForm({  
            post : function (){
                var msg = 'Uploading file...';
                $("#" + thDiv).html(msg);
            },
            complete : function (response){
                $("#" + thDiv).html(response);
                $(':input', '#ImageAddForm').not(':hidden').val('');
            }
        });

        form.submit();
    });
});

Answer 1

I'm not familiar with that plug-in, but I have a suspicion about what might be causing your problem. You are attaching some functionality to your form with the plug-in inside of your change event. This means that on every change you are attaching again, which is likely to cause some problems. Two solutions suggest themselves:

1) If the plug-in has some kind of call to unbind or destroy itself, call that right before binding the plug-in to the form. This should prevent any weird behavior caused by multiple binding.

2) Better solution: bind the plug-in to the form outside your change event, and scope your variables (fldDiv, tdDiv) such that they will be accessible to both your change event (so that they can be modified based on what changed) and the functions used by the plug-in (for post and complete). This way you will only bind the plug-in once, but can still pass and receive different data based on what field changed.