Question

我试图在点击按钮上克隆<tr>元素。然后，我需要在新<tr>内的输入上实例化UI Widget。它适用于 FireFox ， Chrome 和 IE7 ，但不适用于 IE8 。

这是我的HTML：

<table>
<tr>
    <td class="day-name">
        <span class="label label-info">Date</span>
    </td>
    <td class="log-time">
        <div class="control-group">
            <label id="time-label"></label>
            <div class="controls">
                <input type="text" name="time[]" class="xlarge" />
            </div>
        </div>
    </td>
    <td>
        <button title="Add" class="btn btn-primary add-time" type="button">
            <i class="icon-white icon-plus"></i>
        </button>
    </td>  
</tr>
</table>

这是我的javascript代码：

    $('td.log-time input').timepicker({
        onOpen: function(){
            $(this).val('00:00');
        },
        stepMinute: 15,
        timeFormat: 'HH:mm',
        hourMax: 8
    });

    $('.add-time').click(function() {

        var cloned = $(this).parents('tr').eq(0).clone().addClass('cloned');
        $('td.date span', cloned).remove()
        $('button.add-time', cloned).remove();

        cloned.insertAfter($('tr').last());

        $('td.log-time input', cloned)
            .removeClass('hasDatepicker')
            .timepicker({ //The error occur here
                onOpen: function(){
                    $(this).val('00:00');
                },
                stepMinute: 15,
                timeFormat: 'HH:mm',
                hourMax: 8
            });

    });

正如我所说，它适用于FireFox，Chrome和IE7，但不适用于IE8。我得到了这个错误：This object does not support this property or method（在我创建timepicker小部件新实例的行上）。

这不是timepicker插件的问题。我也尝试使用jQuery UI spinner小部件并且具有相同的行为/错误。

[更新] 我正在使用jQuery 1.8.1和jQuery UI 1.9.1

[更新2] 由于用户询问使用的timePicker插件（即使我认为不是时间戳插件问题）

使用的timepicker插件就是这个：http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js

Answer 1

我使用了相同库版本的确切代码，IE8工作正常。

但是，我确实注意到可能导致问题的另一个问题。

您遇到的问题是，点击日期选择器输入后，页面上会有两个table元素。一个在您的初始HTML中，另一个在动态插入ID为ui-datepicker-div的元素中。此附加表用于显示日期选择器的日历布局，但由于您没有使用它，因此它是隐藏的。

点击日期选择器输入后，.add-time按钮上的任何后续点击都会将克隆的tr追加到第二个隐藏表中的最后tr元素。原因是您的选择器（$('tr').last()）不够具体。

将一个类添加到原始表格，如<table class="my-table">，然后将insertAfter行更改为：cloned.insertAfter($('table.my-table tr').last());修复此问题，并且肯定可以在IE8中正常运行。

IE 8在克隆元素上创建UI小部件时出错

1 个答案: