在 IE7 中添加元素答案

【问题标题】：Append element in IE7在 IE7 中添加元素
【发布时间】：2009-12-09 12:48:41
【问题描述】：

我将一个选择元素附加到一个 DOM 节点并动态填充它，这在 Firefox 和 Safari 中运行良好。不幸的是，当我单击选择框时，它不会在 Internet Explorer 中下拉。任何想法这里出了什么问题？

    $('<select size="1">').appendTo(
            $('#mytable tbody')
            .find('tr:last')
            .find('th.col1')
            )
            .attr('id', 'select_' + counter)
            .append('<option>New Option</option>')
            .click(function() {

                var t = $(this);

                    // Get matching alternatives as json
                    $.getJSON(Drupal.settings.basePath + 'mymodule/product_cat/' + data['product_category'], function(cat_data) {
                        t.find('option').remove();
                        $.each(cat_data, function(i,item){
                            t.append($("<option value='" + JSON.stringify(item) + "'>" + item.name + "</option>"));
                        });
                        t.find('option:first').attr('selected', 'selected');
                    });

            })
            .change(function() {
                tmparr = $(this).attr('id').split('_');
                set_row_data($(this).parent().parent(), $(this).val());
            });
}

-- 更新--

我在更新后检查了选择框在 IE7 中包含的代码 - 它通过 json 获得的选项似乎正确地插入到了 dom-tree 中，所以看起来问题出在其他地方。任何想法表示赞赏。

-- 更新 2 --

IE7的问题似乎出在.click()-function:

如果我放置一些这样的代码：

$('#myelement').append('<option>foo</option>');

即使在 IE7 中也能正常工作。

如果我将它放入这样的点击功能中：

$('#myelement').click(function() {
  $(this).append('<option>foo</option>');
});

问题出现了。

-- 解决方案--

没有人注意到（最重要的是：我），我的第一行是错误的：

$('<select size="1">').appendTo(...

应该是

$('<select size="1"></select>').appendTo(...

现在可以使用了，谢谢大家。

【问题讨论】：

标签： jquery internet-explorer-7

【解决方案1】：

在您的 json 中禁用缓存。很多程序员都面临这个问题，比如this one。

编辑

来自codecouch：

一种解决方法是在您的 GET 请求中使用“cache buster”参数。像这样的：

var urlToFetch = 'whatever?randNum=' + new Date().getTime();

这很好用，但也有缺点，具体取决于您的服务器设置。例如，如果您的应用程序服务器位于缓存层之后，您不希望每次幂等请求的 URL 都不同，因为缓存的版本永远不会被使用，因此您的应用程序服务器每次都会受到直接影响.

【讨论】：

你能详细说明一下吗？
感谢您的建议 - 我现在都实现了（建议的标头和 url 修改），但它并没有解决问题。选择框的内容似乎“下滑了几个像素”，点击后不再下滑。

【解决方案2】：

我不认为'<select size="1" id="select_' + counter + '">' 是一个有效的选择器...

试试'#select_'+counter

【讨论】：

此选择器有效。可以肯定的是，我将代码更改为 $('

【解决方案3】：

不知道是否有什么不同，但尝试改变：

$('<select size="1">').appendTo($('#mytable tbody')
            .find('tr:last')
            .find('th.col1')).attr('id', 'select_' + counter)

到

$('#mytable tbody').find('tr:last').find('th.col1')
                   .append($('<select size="1">')
                   .attr('id', 'select_' + counter);

$('#select_' + counter).append.....

..弗雷德里克

【讨论】：

如果您运行有关 $(this).get(0).nodeName 的调试器，IE7 会说什么？（里面你点击方法）

【解决方案4】：

查看解决方案更新

【讨论】：