javascript - 如何使用jquery获取outerHTML以使其跨浏览器

Question

我在 jquery 论坛中找到了一个回复，他们制作了一个函数来执行此操作，但结果不一样。这是我为图像按钮创建的示例:

var buttonField = $('<input type="image" />');
    buttonField.attr('id', 'butonFshi' + lastsel);
    buttonField.val('Fshi');
    buttonField.attr('src', 'images/square-icon.png');
    if (disabled)
        buttonField.attr("disabled", "disabled");
    buttonField.val('Fshi');
    if (onblur !== undefined)
        buttonField.focusout(function () { onblur(); });
    buttonField.mouseover(function () { ndryshoImazhin(1, lastsel.toString()); });
    buttonField.mouseout(function () { ndryshoImazhin(0, lastsel.toString()); });
    buttonField.click(function () { fshiClicked(lastsel.toString()); });

我有这样的情况:

 buttonField[0].outerHTML = `<INPUT id=butonFshi1 value=Fshi src="images/square-icon.png" type=image jQuery15205073038169030395="44">`

相反，我发现的外部函数给出了buttonField.outer() = <INPUT id=butonFshi1 value=Fshi src="images/square-icon.png" type=image>

功能是:

$.fn.outer = function(val){
    if(val){
        $(val).insertBefore(this);
        $(this).remove();
    }
    else{ return $("<div>").append($(this).clone()).html(); }
}

这样我就松开了插入的处理程序。有没有办法用jquery获取outerHTML，以便在不丢失处理程序的情况下跨浏览器？!

Answer 1

您不需要先将其转换为文本(这会断开它与处理程序的连接，只有 DOM 节点和其他特定的 JavaScript 对象才能拥有事件)。只需直接插入新创建/修改的节点即可，例如

$('#old-button').after(buttonField).remove();`

after 返回上一个 jQuery 集合，因此 remove 删除现有元素，而不是新元素。