How to echo href to editable div

Question

I am attempting to echo a link into an editable div. This is handled by JQuery and then passed to an html file. echo in php script

echo "<a href='Olliff_index.html'>Return to Main Menu</a>";

Received by

var formData = $('#billingForm,#videoForm').serializeArray();
        $.post('Olliff_receipt.php', formData, function(data) {
            $('div#Wrapper').empty().append(data);
        });

div#Wrapper references

<div id="Wrapper" contenteditable="true">
        <div id="form">
        <h3>Bob's Order Form</h3>
        <p>Please Select a Department</p>
        <br />
        <form id="videoForm">
            <div id="header" contenteditable="true" align="center"></div>
            <div style="height:200px;overflow:auto;" id="department" contenteditable="true"></div>
            <br />
            <input type="button" id="submit" value="Submit"/> <input type="button" id="reset" value="Reset"/>
            <div id="msg" contenteditable="true"></div>
        </form>
        </div>
    </div>

The result is the text "Return to Main Menu" and it appears to be a link (underlined blue font) but is not clickable. Some extra info I'm not sure is related is this is all taking place within Olliff_index.html so the href is linking to the file it is in but that shouldn't matter right?

Answer 1

In your js, try to add this:

var formData = $('#billingForm,#videoForm').serializeArray();
    $.post('Olliff_receipt.php', formData, function(data) {
        $('div#Wrapper').empty().append(data);
        $('div#Wrapper').removeAttr('contenteditable'); //new line
    });

With this change, your href will be clickable

Answer 2

It's because of the attribute:

contenteditable="true"

in the

<div id="Wrapper" contenteditable="true">