通过jquery添加时，表不可见，按钮不工作

Table not visible and buttons not working when added through jquery

本文关键字：按钮 工作 jquery 添加 通过      更新时间：2024-03-05

我正在玩blueimp的jQuery文件上传演示。过去几天我一直在研究它，我想我对它的工作原理有了很好的了解。然而，我在网络开发方面几乎没有经验，有一个问题让我很感兴趣

在演示的Basic UI Plus部分，排队等待上传的文件（通过Add按钮选择的文件）使用JavaScript模板显示

 <table role="presentation" class="table table-striped">
        <tbody class="files"></tbody>
 </table>

模板将被渲染，其输出将被放置在具有"files"类的块中。在这个例子中，它是"tbody"块。

但是，如果我也尝试从模板中输出表标记：

<div class="files">
     <!-- Template's output comes here: it will contain <table></table> -->
</div>

根据FireBug的DOM查看器，所有内容都将按预期呈现，但表将不可见。在用不同的布局进行测试后，我意识到，如果我从用模板生成的"tr"中删除"fade"类，那么表将是可见的，但演示将无法按预期工作。两个启动按钮现在都不起作用。

以下是两个jsfiddle：

工作的将正确显示排队文件表。当按下两个"开始"蓝色按钮中的任何一个时，它将尝试上传并表示未按预期找到服务器。

奇怪的一个不会显示任何表格，尽管它在firebug中显示正确。按照下面的建议删除"fade"类或添加"in"类后，所有内容都会显示出来，但没有一个开始按钮可以工作。

有人能解释一下到底发生了什么吗？谢谢

当有fade类时，元素是完全不透明的，这就是你看不到它的原因。要让它再次可见，你还必须向它添加in类。从视觉上看效果不错，看http://jsfiddle.net/xkych55n/1/并注意HTML代码中第163行的细微差异。

问题是脚本认为这些文件是"files"容器的直接子级。

因此，如果您有<table role="presentation" class="table table-striped"><tbody class="files">，它会找到<tbody>的子级，即包含文件的<tr>。

如果将其更改为<div class="files"><tableclass="table"><tbody>，则会认为<table>元素是一个文件，而不是<tr> s。

我只需要将HTML更改为<div class="files"><table role="presentation" class="table table-striped"><tbody class="files"></tbody></table></div>，其余部分保持不变。更改javascript毫无意义。

另一种选择是完全去掉表，只需确保文件是容器的直接子级。。。例如：

集装箱：

<div class="files"></div>

模板：

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <div class="template-upload fade">
        <div>
            <span class="preview"></span>
        </div>
        <div>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </div>
        <div>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
        </div>
        <div>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </div>
    </div>
{% } %}
</script>

当然，那样你就必须修正造型了这是一把正在工作的小提琴

注意：第191行和第236行有错误。</table></tbody>应该是</tbody></table>。

相关文章：