how to get outerHTML with jquery in order to have

Question

I found a response in a jquery forum and they made a function to do this but the result is not the same. Here is an example that I created for an image button:

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

And I have this situation:

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

instead the outer function I found gives buttonField.outer() = <INPUT id=butonFshi1 value=Fshi src="images/square-icon.png" type=image>

The function is:

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

so like this I loose the handlers that I inserted. Is there anyway to get the outerHTML with jquery in order to have it cross-browser without loosing the handlers ?!

Answer 1

This should work fine:

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

Answer 2

You don't need convert it to text first (which is what disconnects it from the handlers, only DOM nodes and other specific JavaScript objects can have events). Just insert the newly created/modified node directly, e.g.

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

after returns the previous jQuery collection so the remove gets rid of the existing element, not the new one.

Answer 3

Check out the jQuery plugin from https://github.com/darlesson/jquery-outerhtml. With this jQuery plugin you can get the outerHTML from the first matched element, replace a set of elements and manipulate the result in a callback function.

Consider the following HTML:

<span>My example</span>

Consider the following call:

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

The variable span is equal <span>My example</span>.

In the link above you can find more example in how to use .outerHTML() plug-in.

Answer 4

Try this one:

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

:)