JQuery remove() 无法与 Infragistics igCurrencyEditor 和 igPercentEditor 一起正常工作
JQuery remove() Not Working Properly with Infragistics igCurrencyEditor and igPercentEditor
我有一个简单的表单,允许用户设置下拉值、文本框值,然后单击保存按钮。然后重置表单并通过 bootstrap rows/columns 显示所选选项。他们可以根据需要多次重复此过程,每次单击 "Save" 时,都会显示一个新行。每行都有一个 "Delete" 按钮,用于从 DOM.
中删除该行
这是我的问题:
我正在使用 Infragistics 提供的 igCurrencyEditor
和 igPercentEditor
。在我的文本框上调用 .igCurrencyEditor()
方法后,它会向 DOM 添加几个额外的 <div>
和 CSS 类,这是我不想要的。因此,在编辑器初始化之后,我调用了一个 JavaScript 函数来删除所有多余的元素和 CSS 类.
如果我调用这个 JavaScript 函数,那么文本框看起来是正确的,但是我的 "Delete" 按钮不能正常工作。如果我不调用 JavaScript 函数,那么我的文本框看起来不正确,但 "Delete" 按钮可以正常工作。
可以找到完整的工作 fiddle 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 行以查看 "Delete" 按钮是否正常工作。
简而言之:
我会坚持选项 #2 并制定样式。
解释:
不幸的是,在处理此类控件时(当然是 Ignite UI,但我确信使用最复杂的控件 - jQuery UI 小部件和可能的其他框架),删除元素非常不可取,因为逻辑可能依赖于该结构来运行。
这些控件处理的用例很少,因此呈现的不仅仅是基本输入。然后 destroy
过程与初始渲染完全相反,它希望删除您已经更改的元素和 return 它们旁边的原始元素。
正如您已经看到的,当您更改内部控制结构时,您会遇到意想不到的行为。控件 DOM 就是它的本来面目,除非控件明确设计用于处理外部更改。
你能做什么:
- 您可以从包含控件的 CSS(例如 igPercentEditor Overview 有添加步骤)开始,否则控件的 DOM 可能看起来未对齐或显示通常隐藏的元素。
至于主题 - Ignite UI 也有一系列 Bootstrap 主题,您可以使用甚至构建自己的主题,例如使用 Bootstrap 3默认:
http://jsfiddle.net/damyanpetev/jxafth11/
并且您始终可以使用 Theming 部分中列出的 类 来根据您的喜好调整外观,无论您选择何种主题。
我有一个简单的表单,允许用户设置下拉值、文本框值,然后单击保存按钮。然后重置表单并通过 bootstrap rows/columns 显示所选选项。他们可以根据需要多次重复此过程,每次单击 "Save" 时,都会显示一个新行。每行都有一个 "Delete" 按钮,用于从 DOM.
中删除该行这是我的问题:
我正在使用 Infragistics 提供的 igCurrencyEditor
和 igPercentEditor
。在我的文本框上调用 .igCurrencyEditor()
方法后,它会向 DOM 添加几个额外的 <div>
和 CSS 类,这是我不想要的。因此,在编辑器初始化之后,我调用了一个 JavaScript 函数来删除所有多余的元素和 CSS 类.
如果我调用这个 JavaScript 函数,那么文本框看起来是正确的,但是我的 "Delete" 按钮不能正常工作。如果我不调用 JavaScript 函数,那么我的文本框看起来不正确,但 "Delete" 按钮可以正常工作。
可以找到完整的工作 fiddle 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 行以查看 "Delete" 按钮是否正常工作。
简而言之: 我会坚持选项 #2 并制定样式。
解释:
不幸的是,在处理此类控件时(当然是 Ignite UI,但我确信使用最复杂的控件 - jQuery UI 小部件和可能的其他框架),删除元素非常不可取,因为逻辑可能依赖于该结构来运行。
这些控件处理的用例很少,因此呈现的不仅仅是基本输入。然后 destroy
过程与初始渲染完全相反,它希望删除您已经更改的元素和 return 它们旁边的原始元素。
正如您已经看到的,当您更改内部控制结构时,您会遇到意想不到的行为。控件 DOM 就是它的本来面目,除非控件明确设计用于处理外部更改。
你能做什么:
- 您可以从包含控件的 CSS(例如 igPercentEditor Overview 有添加步骤)开始,否则控件的 DOM 可能看起来未对齐或显示通常隐藏的元素。
至于主题 - Ignite UI 也有一系列 Bootstrap 主题,您可以使用甚至构建自己的主题,例如使用 Bootstrap 3默认: http://jsfiddle.net/damyanpetev/jxafth11/
并且您始终可以使用 Theming 部分中列出的 类 来根据您的喜好调整外观,无论您选择何种主题。