CODEWITHSUNDEEP
javascriptjqueryhtml
Daniel Alsaker
Daniel Alsaker

Reputation: 193

how to make onClick button click contenteditable element

So I am using the contenteditable function on some content. I don't think it's very user friendly as people cannot see that they have to click the content to edit it. Therefore I want a button that says edit and then that will lead you to the editable content. something like this.

$('#editButton').click(function(){
    $('#editable').trigger('click');
});

I made a test example where when I click a button then it should click the pharagraph. But it does not activate the contenteditable function, even though it does click the paragraph! I know that it clicks it, as I tried to add an alert to the paragraph if clicked, and it doed preform this alert whenever you click the button.

You can try it for yourself in the snippet below:

<p id="editable" contenteditable="true">This content is editable</p>
<button id="editButton">Edit</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$('#editable').click(function(){
 alert('the paragraph was clicked');
});

$('#editButton').click(function(){
 $('#editable').trigger('click');
});
</script>

Upvotes: 0

Views: 3499

Answers (2)

Nitya Kumar
Nitya Kumar

Reputation: 968

$('#save').hide();

$('#editButton').click(function(){
 $('#editable').focus();
$('#editButton').hide();
$('#save').show();
});


$('#save').click(function(){
$('#editButton').show();
$('#save').hide();
});
<p id="editable" contenteditable="true">This content is editable</p>
<button id="editButton">Edit</button>

<button id="save">Save </button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Upvotes: 1

Dave
Dave

Reputation: 2900

$('#editable').click(function(){

});

$('#editButton').click(function(){
 $('#editable').focus();
});
<p id="editable" contenteditable="true">This content is editable</p>
<button id="editButton">Edit</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Upvotes: 4

Related Questions