HTML making Div editable by clicking on the edit button

Question

I am trying to make both DIV's editable when I click on the edit icon on bottom left. How can I do that?

<li class="question" id="question2">

    <div class="question-header curves dense-shadows">

        What color is the sky? 
    </div>
    <div class="question-content dense-shadows">
        <ol type="A">
            <li><input type="radio" id="q2a1" name="question2" /> Red</li>
            <li><input type="radio" id="q2a2" name="question2" /> Green</li>
            <li><input type="radio" id="q2a3" name="question2" /> Blue</li>
            <li><input type="radio" id="q2a4" name="question2" /> Brown</li>
        </ol>
        <div style="text-align:right">
            <a href="#"><span style="margin-left:5px;"><img src="images/editbutton.png" 
                onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a>
            <a href="#"><span style="margin-left:5px;"><img src="images/deletebutton.png" 
                onmouseover="this.src='images/deletebuttonhover.png'" onmouseout="this.src='images/deletebutton.png'" title="Delete" alt="delete"/></span></a>
        </div>
    </div>
</li>

@putvande That makes the div contenteditable by clicking anywhere. I want it to be editable when I click the edit icon. — user2626071, Jul 27 '13 at 17:51

score 0 · Answer 1 · answered Jul 27 '13 at 17:58

Well, you can do something like this:

<li class="question" id="question2">
    <div class="question-header curves dense-shadows">
        What color is the sky? 
    </div>
    <div class="question-content dense-shadows">
        <ol type="A">
            <li><input type="radio" id="q2a1" name="question2" /> Red</li>
            <li><input type="radio" id="q2a2" name="question2" /> Green</li>
            <li><input type="radio" id="q2a3" name="question2" /> Blue</li>
            <li><input type="radio" id="q2a4" name="question2" /> Brown</li>
        </ol>
        <div style="text-align:right">
            <a href="#" class="edit"><span style="margin-left:5px;"><img src="images/editbutton.png" 
                onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a>
            <a href="#" class="delete"><span style="margin-left:5px;"><img src="images/deletebutton.png" 
                onmouseover="this.src='images/deletebuttonhover.png'" onmouseout="this.src='images/deletebutton.png'" title="Delete" alt="delete"/></span></a>
        </div>
    </div>
</li>

<script>    
$('a.edit').on('click',function(){
    $(this).closest('li').find('.question-header, .question-content').attr('contenteditable','true');
});
</script>

Note that I have added class="edit" and class="delete" to your buttons.

Thanks that makes a lot of sense but for some reason when I click on the button nothing happens. Why might that be? — user2626071, Jul 27 '13 at 18:05
You won't see a lot, but if you try clicking on the div and start typing, you should see that it is definitively editable. You could add a CSS style for the `contenteditable` element so it is more clear that you can edit it. — putvande, Jul 27 '13 at 18:06
What browser are you using? And is your page you are working on HTML5? — putvande, Jul 27 '13 at 18:10
could it be because contenteditable was never set to true in the script? — user2626071, Jul 27 '13 at 18:11
It should work fine if you just add `contenteditable` but better to set it to 'true' — putvande, Jul 27 '13 at 18:11

Vova Bilyachat · Answer 2 · 2013-07-28T09:08:43.150

Well you question is not clear but i will try to guess. If you want to make div editable you can mark it with contenteditable

so to do that replace your code

 <a href="#"><span style="margin-left:5px;"><img src="images/editbutton.png" 
                onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a>

with

<a href="javascript:void(0)" class="edit"><span style="margin-left:5px;"><img src="images/editbutton.png" 
                    onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /></span></a>

then add script

<script>
    $("a.edit").click(function(){
       $("div.question-content").attr("contenteditable", "true");
    });
    </script>

Please note that i have added class to link and replaces HREF

Here is my example http://jsfiddle.net/r9HTe/

HTML making Div editable by clicking on the edit button

2 Answers2

Linked