jQuery 选择器“内存”

Question

我有一个包含多个字段的表单，每次用户更改字段时都会提交表单（通过隐藏的 iframe），并通过回调将响应放置在页面上适当的 div 中。第一次这个效果很好。但是在每个后​​续字段更改和提交中，响应都会显示在每个已填充响应的 div 中（因此它们都显示相同的内容，而不是所需的行为）。

谁能告诉我为什么会发生这种情况？似乎保留了之前调用过的选择器（自上次页面加载以来）......但我不确定。这是我的代码：

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

我不熟悉该插件，但我怀疑是什么导致了您的问题。您正在使用更改事件内的插件将一些功能附加到您的表单。这意味着每次更改时您都会再次附加，这可能会导致一些问题。建议采用两种解决方案：

1) 如果插件有某种取消绑定或销毁自身的调用，请在将插件绑定到表单之前调用该调用。这应该可以防止由多重绑定引起的任何奇怪行为。

2）更好的解决方案：将插件绑定到更改事件外部的表单，并确定变量（fldDiv、tdDiv）的范围，以便您的更改事件可以访问它们（以便可以根据更改的内容进行修改）以及插件使用的功能（用于发布和完成）。这样，您只需绑定插件一次，但仍然可以根据字段更改传递和接收不同的数据。