动态添加的元素未在 HTML 表格的 TD 中显示答案

【问题标题】：Dynamically Added Element Not showing in TD in HTML Table动态添加的元素未在 HTML 表格的 TD 中显示
【发布时间】：2013-04-29 17:31:55
【问题描述】：

我有这个代码：

var closeButton = $("<a class='close'/>")
                                    .button({
                                        icons: {
                                            primary: "ui-icon-close"
                                        },
                                        text: false
                                    })
                                    .removeClass("ui-corner-all")
                                    .addClass("ui-corner-right ui-combobox-toggle")
                                    .click(function () {
                                        if (invisibleElement != null)
                                            jQuery(invisibleElement).val("");
                                        //removing the close button with placaholder value
                                        jQuery(visibleElement).val("Select");
                                        jQuery(visibleElement).focus();
                                        jQuery(visibleElement).blur();
                                        var parentNode = $(this).parent();
                                        parentNode.find(this).remove();
                                        isCloseButton = false;
                                    });

我通过这个有条件地添加这个按钮：

$(visibleElement).parent().find(".showAll").after(closeButton);

默认情况下不添加此项。这是根据一些输入添加的。

这些东西被添加到一个 td 中

<table border="0" width="100%" cellspacing='0' cellpadding='2'>
<tr>
    <td style="vertical-align:middle; text-align:left; width: 45%;">
                                <input type="text" id="theVisibleElement" value=""/>

    </td>
</tr>

但添加closeButton 后，我看不到showAll 元素。只有 inputBox(visibleElement) 和 closeButton 是可见的。虽然，在源代码中所有三个都存在，即可见元素（输入文本框）、showAll 元素和closeButton。奇怪的是td 足够大，但三个都没有出现。该怎么办？有什么建议吗？

这是 jsfiddle：http://jsfiddle.net/8U6xq/1/ 虽然有点乱。

【问题讨论】：

你能为此做一个 jsFiddle 吗？问题太模糊了，您没有显示所有相关代码。例如，td 放在哪里？
jsfiddle 会搞砸的。好，我会试试。但我已经给出了所有代码。
@jtheman jsfiddle 添加。
我可能错了，但您的测试if (jQuery.trim($(invisibleElement).val()).length > 0 && jQuery.trim($(invisibleElement).val()) != "0") 将始终为假，因为它只在创建元素时执行一次。
@Brewal 感谢您的评论。实际上，该代码从未在那里执行。关闭按钮是由下面的代码添加的，它是在autocomplete 的select 事件中编写的。

标签： javascript jquery html html-table

【解决方案1】：

这是一个 CSS 问题。您的“关闭”元素就在您的 showAll 元素之上。在此处查看更正的小提琴：

http://jsfiddle.net/8U6xq/2/

我刚刚在 css 中更改了这个：

.close {
    left: 270px;
}

【讨论】：

感谢您的解决方案。但是你能指出它的原因吗？与其他地方一样，这不是问题，并且关闭按钮通常在 Show All 按钮之后添加。
@soham.m17 这是因为.ui-combobox-toggle 类中的position: absolute;。您也可以将其更改为position: relative;