как получить externalHTML с помощью jquery, чтобы он был кросс-браузерным

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(); }
}

так вот так я теряю вставленные мной обработчики. В любом случае можно получить externalHTML с jquery, чтобы он был кросс-браузерным без потери обработчиков?!

Answer 1

Попробуйте это:

var html_text = `<INPUT id=butonFshi1 value=Fshi src="images/square-icon.png" type=image jQuery15205073038169030395="44">`
buttonField[0].html(html_text);

:)

Answer 2

Проверьте плагин jQuery из https://github.com/darlesson/jquery-outerhtml. С этим плагином jQuery вы можете получить externalHTML из первого сопоставленного элемента, заменить набор элементов и манипулировать результатом в функции обратного вызова.

Рассмотрим следующий HTML:

<span>My example</span>

Рассмотрим следующий вызов:

var span = $("span").outerHTML();

Переменная span равна Мой пример .

В ссылке выше вы можете найти больше примеров того, как использовать плагин .outerHTML ().

Answer 3

Вам не нужно сначала преобразовывать его в текст (то есть то, что отключает его от обработчиков, события могут иметь только узлы DOM и другие конкретные объекты JavaScript).Просто вставьте только что созданный / измененный узел напрямую, например,

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

after возвращает предыдущую коллекцию jQuery, чтобы remove избавился от существующего элемента, а не от нового.

Answer 4

Это должно работать нормально:

var outer = buttonField.parent().html();