使用jQuery清除DOM元素,然后重新创建和重新绑定各种函数

时间:2013-01-04 22:03:00

标签: jquery dom dom-manipulation jquery-forms-plugin multifile-uploader

我有一个非常令人困惑的时间,这已浪费了几个小时!

我之前发布了这个:Binding jquery-multifile to a dynamically loaded form

这解释了我问题的第一部分。

我现在遇到与jquery.forms

相同的问题

所以,扩展我正在做的事情:

我正在将一个Form加载到一个带有jquery.load的DIV中,DIV被添加到Body中,并显示为一个模式窗口,所有这些都是使用jQuery。将元素添加到DOM后,我调用

$('#imgSelect').MultiFile();

和      $( 'reportIt')给ajaxForm(选项);

这两行将$.MultiFile()$.ajaxForm(jquery.forms)添加到相关元素,链接:

http://malsup.com/jquery/form/

http://www.fyneworks.com/jquery/multiple-file-upload/

这非常有效,并且所有功能都符合预期......除了......

如果用户按下模态窗口中的关闭按钮,然后重新打开窗口而不执行新的页面加载,则会中断。

当用户关闭模态窗口时,会发生以下情况:

function closeModal(ele) {
    if ($(ele).hasClass('noClose')) {
        alert("Please wait... we're working on something.");
    } else {
        $(ele).fadeOut(function () { 
            $(this).remove();
        });
    };
};

因此,它非常简单地淡化模态div元素,然后将其从DOM中完全删除。

根据这个:http://www.w3schools.com/jquery/html_remove.asp

$().remove()方法从DOM中删除父容器中的所有元素完全 AND

  

此方法还会删除所选元素的数据和事件。

所以,据我所知,这应该意味着就jQuery和相应的插件而言,每次创建模态窗口并将其写入DOM时,它都是一组全新的元素,因此,绑定.MultiFile().ajaxForm() 应该完全相同,无论之前是否显示过

除了它不能再次工作! (多文件输入表现为单个输入,并且提交的表单可以内联工作,而不是作为需要的AJAX提交)

我得到的唯一错误就是我在上一篇文章中提到的。

进一步调查显示jquery.MultiFile插件脚本中的这些行发生此错误:

$.fn[method] = function () {
    $.fn.MultiFile.disableEmpty();
         value = $.fn.MultiFile.intercepted[method].apply(this, arguments);              
          setTimeout(function () { $.fn.MultiFile.reEnableEmpty() }, 1000);
          return value;
}; // interception

对于熟悉此插件的人来说,这是第453行。

看一下插件的作用,我认为这是使用添加了类MultiFile-intercepted的元素,但是通过Chrome控制台观看DOM操作我根本看不出第一个和第一个之间的行为有什么不同这些函数第二次运行,所以无法解决问题所在。

有人可以提供任何建议,说明为什么这些功能在第二次尝试时不起作用?

  • 我在使用jquery.remove()
  • 时遗漏了什么
  • 有没有 remove()函数在我正在使用的任何一个/两个插件中 我忽略了(我已阅读文档)

编辑:正如它正在进行中,这里有一个有效的例子:

http://www.guitartrak.com/

如果您使用类别>填写“注册项目”表单电吉他,品牌>吉布森,然后把你想要的东西放在其他东西,然后按“继续”,尝试在图像选择上添加多个文件,这应该是第一次工作。现在,不要按“保存并发布”,但按下大“X”,然后再次尝试整个过程而不刷新页面...当你再次尝试添加图像时,你会看到问题。

0 个答案:

没有答案