Question

我正在尝试将此{j}代码从1.8更新为1.11，我遇到了问题。以下代码曾用于1.8，但现在只有一半有效（没有错误）。

我有以下功能：

function selectCountry(c_id){
    var obj = $('#country a[data-index=' + c_id + ']');
    if(obj.hasClass('cselect'))
        return;
    var clone = obj.clone();
    var div = $('<div class="keyword-box"></div>');
    var remove = $('<a href="javascript:void(0);" data-index="' + c_id + '" data-label="removeCountry_label" data-action="removeCountry" class="remove EXremove">&times;</a>');
    clone.after(remove).appendTo(div);
    div.prependTo('#selected_country');
    obj.hide().addClass('cselect');
    return false;
}

它过去做的是创建一个这样的div：

<div class="keyword-box">
    <a href="javascript:void(0);" class="country-link keyword" data-index="9" rel="Albania">Albania</a>
    <a href="javascript:void(0);" data-index="9" data-label="removeCountry_label" data-action="removeCountry" class="remove EXremove">×</a>
</div>

但现在正在创建一个这样的div：

<div class="keyword-box">
    <a href="javascript:void(0);" class="country-link keyword" data-index="9" rel="Albania">Albania</a>
</div>

我不确定为什么第二个a标记不再被添加到div中。有人能看出为什么会这样吗？

Answer 1

版本为1.9的change in jQuery

在1.9之前，。after（）,. before（）和.replaceWith（）会尝试如果第一个节点在当前jQuery集中添加或更改节点 set没有连接到文档，在这些情况下返回一个新文档 jQuery设置而不是原始设置。这创造了几个不一致和彻头彻尾的错误 - 方法可能会也可能不会根据参数返回一个新结果！截至1.9，这些方法总是返回原始的未修改集并尝试在没有父节点的节点上使用.after（）,. before（）或.replaceWith（）没有效果 - 也就是说，它所包含的集合或节点都不是改变。

在您的情况下，您可以更改

clone.after(remove).appendTo(div);

到

clone.add(remove).appendTo(div);

或

div.append(clone, remove);

Answer 2

如果你想添加这样的链接，我认为你的代码会更具可读性：

div.append(clone);
div.append(remove);
div.prependTo('#selected_country');

Answer 3

jQuery 1.9中更改了.after() API。在你的情况下使用它现在没有任何效果。我认为您应该创建<div>并明确地将两个<a>元素分别附加到其中。

所以：

var div = $('<div class="keyword-box"></div>');
var remove = $('<a href="javascript:void(0);" data-index="' + c_id + '" data-label="removeCountry_label" data-action="removeCountry" class="remove EXremove">&times;</a>');

remove.appendTo(div);
clone.appendTo(div);

将jQuery从1.8更新到1.11 <a> tag not getting appended</a>

3 个答案: