我有一个简单的表单,允许用户设置下拉值,设置文本框值并单击保存按钮。然后,将重置表单,并通过引导程序行/列显示所选的选项。他们可以根据需要多次重复此过程,并且每次单击“保存”时,都会显示一个新行。每行都有一个“删除”按钮,可将其从DOM中删除。
这是我的问题:
我正在使用Infragistics提供的igCurrencyEditor
和igPercentEditor
。一旦在文本框上调用.igCurrencyEditor()
方法,它就会向DOM添加一些额外的<div>
和CSS类,这是我不想要的。因此,在编辑器初始化之后,我调用了JavaScript函数来删除所有多余的元素和CSS类。
如果我调用此JavaScript函数,则文本框看起来正确,但是我的“删除”按钮无法正常工作。如果我不调用JavaScript函数,则我的文本框看起来不正确,但是“删除”按钮可以正常工作。
可以找到完整的小提琴here。
这是调用我的函数之前的igCurrencyEditor
示例:
<div class="ui-igedit ui-igedit-container ui-widget ui-corner-all ui-state-default">
<div class="ui-igeditor-input-container ui-corner-all">
<input id="TXTAMBCoOp_Amount_22222222-2222-2222-2222-222222222222" type="tel" class="form-control ui-igedit-input" readonly="" role="textbox" aria-label="Currency Editor" style="height: 100%; text-align: right;">
<input type="hidden" readonly="" name="co_op_vendor_amount_22222222-2222-2222-2222-222222222222" value="0">
</div>
</div>
这是我的代码示例,该示例删除了不需要的元素和CSS类:
// get a reference to the text input and the hidden input so we can move them later
var text_input = $("#" + textbox_id);
var hidden_input = text_input.nextAll("input:hidden");
// get a reference to the infragistics div so we can delete it later
var ig_div_to_delete = text_input.parent().parent();
// get a reference to the span so we know where to insert the input
var span = ig_div_to_delete.nextAll("span");
// move the inputs out of the infragistics div
text_input.insertBefore(span);
hidden_input.insertBefore(span);
// remove infragistics classes
text_input.removeClass();
text_input.addClass("form-control");
text_input.prop("style", "");
// remove the infragistics div
ig_div_to_delete.remove();
同样,有两种可能的结果:
我调用了上面的代码,因此修改了
igCurrencyEditor
以使其符合我的方式,但是我的代码无法正常工作。我不调用上面的代码,因此即使我不喜欢
igCurrencyEditor
的外观,也不要理会它,但至少我的代码可以正常工作。在情况2中,我使用
.remove()
函数删除整个<div class="row">
及其所有内容,并且可以正常工作。但是,在情况1中,我使用相同的
.remove()
函数删除<div class="row">
。 <div>
被删除,但是不知何故div的子元素没有被删除。谁能帮助我了解为什么会这样?
编辑:在上述my fiddle中,注释掉第111行和第120行,以查看“删除”按钮是否正常工作。
最佳答案
简而言之:
我会坚持选择#2并确定样式。
说明:
不幸的是,在处理这样的控件时(一定是Ignite UI,但是我敢肯定使用大多数复杂的控件-jQuery UI小部件以及可能的其他框架),删除元素是非常不可取的,因为逻辑可能依赖于该结构才能起作用。
这些控件处理的用例很少,因此比基本输入要多一些。然后,destroy
过程与初始渲染完全相反,该过程试图删除已经更改的元素,并在它们旁边返回原始元素。
因此,正如您已经看到的那样,当您更改内部控制结构时,您会得到意外的行为。控件DOM就是它的样子,除非控件被明确设计为处理外部更改。
你可以做什么:
您可以先添加控件的CSS(例如igPercentEditor Overview已添加步骤),否则控件的DOM可能看起来未对齐或显示通常被隐藏的元素。
至于主题-Ignite UI也提供了一系列Bootstrap主题供您使用,甚至可以构建自己的主题,例如使用Bootstrap 3默认设置:
http://jsfiddle.net/damyanpetev/jxafth11/
而且,无论选择哪种主题,您始终可以使用Theming部分中列出的类来根据自己的喜好调整外观。
关于jquery - jQuery remove()与基础设施igCurrencyEditor和igPercentEditor不能正常工作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46611407/