javascript - 将 jQuery .wrap() 与 .after() 链接起来

Question

好吧，所以我正在编写一个小插件......没什么大不了的，但我遇到了这个问题(精简以显示孤立的问题)

我的插件使用 jQuery .wrap()，在本例中我也将使用 .after()。

(function( $ ) {

    var newWrap = $('<div/>');

    $.fn.smartform = function() { 

        this.wrap(newWrap);
        return this;

    };

}( jQuery ));

与.after()混合实现

$(document).on('click', '#addInput', function(){

    var newInput = $('<input/>').smartform().val('Just Added');
    $(this).after(newInput);

});

我的函数正确返回正确的目标对象，因为我看到新输入的值是“刚刚添加”，但输入没有被包装，我不明白为什么。

我可以让它以这种方式工作(如下)，但它并不理想，因为这取决于新元素的插入方式( .append .before .after )将强制以不同方式遍历以定位新添加的元素。

$(document).on('click', '#addInput', function(){

    var newInput = $('<input/>').val('Just Added');
    $(this).after(newInput).next('input').smartform();

});

任何想法都会很棒，如果您有任何问题，请随时提出...

提前谢谢

Answer 1

问题是 newInput 引用了您创建的 input 元素，它仍然不是 dom 的一部分。当您包装输入时，包装器仅在内存中创建，而不是在 dom 中。

因此，当您在 after() 中使用 newInput 时，输入将从内存 div 中删除，并插入到 之后>button 因此包装元素丢失。

$(document).on('click', '#addInput', function () {

    var newInput = $('<input/>').smartform().val('Just Added');
    $(this).after(newInput.parent());

});

演示:Fiddle