Question

我有一个简单的表单，允许用户设置下拉值，设置文本框值，然后单击保存按钮。然后重置表单，并通过引导行/列显示所选选项。他们可以根据自己的喜好重复这个过程，每次点击＆＃34; Save＆＃34;，都会显示一个新行。每行都有一个＆＃34;删除＆＃34;从DOM中删除行的按钮。

这是我的问题：

我正在使用Infragistics提供的igCurrencyEditor和igPercentEditor。在我的文本框中调用.igCurrencyEditor()方法后，它会向DOM添加几个额外的<div>和CSS类，这是我不想要的。因此，在编辑器初始化之后，我调用一个JavaScript函数来删除所有额外的元素和CSS类。

如果我调用这个JavaScript函数，那么文本框看起来是正确的，但我的＆＃34;删除＆＃34;按钮不能正常工作。如果我没有调用JavaScript函数，那么我的文本框看起来不对，但是＆＃34;删除＆＃34;按钮工作正常。

可以找到一个完整的工作小提琴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行，以查看＆＃34;删除＆＃34;按钮工作正常。

Answer 1

简而言之： 我坚持选择＃2并制定样式。

<强>解释

不幸的是，在处理这样的控件时（当然是Ignite UI，但我确信最复杂的控件--jQuery UI小部件和可能的其他框架），删除元素是非常不可取的，因为逻辑可能依赖于该结构来运行。

这些控件处理的用例很少，因此渲染的内容多于基本输入。然后destroy过程与初始渲染非常相反，并且希望删除已经更改的元素并将原始元素返回到它们旁边。

正如您已经看到的，当您更改内部控制结构时，您会遇到意外行为。控制DOM就是这样，除非明确设计一个控件来处理外部变化。

你能做什么：

您可以从包含控件的CSS开始（例如igPercentEditor Overview添加了步骤），否则控件的DOM可能看起来未对齐或显示通常被隐藏的元素。
至于主题 - Ignite UI还有一些您可以使用的Bootstrap主题，甚至可以构建您自己的主题，例如使用Bootstrap 3默认值： http://jsfiddle.net/damyanpetev/jxafth11/
您可以随时使用Theming部分中列出的课程来调整您喜欢的外观，无论您选择哪种主题。

JQuery remove（）与Infragistics igCurrencyEditor和igPercentEditor无法正常工作

1 个答案: