Nitish Kumar Nitish Kumar - 3 months ago 19
HTML Question

How to make contenteditable to child element using JQuery

I'm having a set of html codes with a class of

nitssection
, I'm displaying the buttons
onclick
event of
JQuery
, I've some text under it, I'm trying to make it
contenteditable
onclick
event, but I guess the
nitssection
click event is not making it true. As I can see
.nitssection
event is working, on clicking I can see my buttons. Like for example my HTML code looks like:

<div class="section nitssection" data-nitsid="3">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box-content">
<h4 class="box-title nitstext"><a href="text.html">Some text</a></h4>
<p class="nitstext">Paragraph</p>
<a href="text.html" class="btn btn-sm style4 hover-blue">Read more</a>
</div>
</div>
</div>
</div>
</div>


for displaying buttons I've:

$('.nitssection').click(function(e) {
$('#' + nitsid).css({
//Displaying buttons
}).fadeIn(400);
$(this).click(function(e){
e.stopPropagation();
})
});


For making
nitstext
class as contenteditable, I'm tyring:

$('.nitssection').find('a').each(fucntion () {
$(this).removeAttr("href");
});
$('.nitstext').click(function () {
$(this).attr("contenteditable", "true");
});


I'm not able to achieve this. Help me out.

Answer

Once the element exists, contenteditable is a property (but your attr should work anyway, any value technically makes boolean attributes true).

I think it's making it editable, but it's not obvious because it doesn't seem to gain focus; adding a call to .focus after steting it editable seems to make that work. Also, you have fucntion instead of function which is preventing part of your code running.

So I'd make the prop change and add .focus and fix the typo:

$('.nitstext').click(function () {
   $(this).prop("contenteditable", true).focus();
   //      ^^^^                    ^^^^ ^^^^^^^^
});

...which seems to work (I commented out the code using the nitsid variable, as I don't have one):

$('.nitssection').click(function(e) {
  /*
    $('#' + nitsid).css({
        //Displaying buttons
    }).fadeIn(400);
  */
    $(this).click(function(e){
        e.stopPropagation();
    });
});

$('.nitssection').find('a').each(function () {
     $(this).removeAttr("href");
});
$('.nitstext').click(function () {
   $(this).prop("contenteditable", true).focus();
});
<div class="section nitssection" data-nitsid="3">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="box-content">
                    <h4 class="box-title nitstext"><a href="text.html">Some text</a></h4>
                    <p class="nitstext">Paragraph</p>
                    <a href="text.html" class="btn btn-sm style4 hover-blue">Read more</a>
                </div>
            </div>
        </div> 
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Side note: This code is highly suspect:

$('.nitssection').click(function(e) {
    $('#' + nitsid).css({
        //Displaying buttons
    }).fadeIn(400);
    $(this).click(function(e){
        e.stopPropagation();
    })
});

It's setting up a click handler on all .nitsection elements and, when they're clicked, adding another click handler on that specific .nitsection element. Every click will add a further one. That doesn't doesn't make any sense.

You've said this is to stop clicks on .nitstext from firing the .nitssection handler; instead of doing it that way, do this in the .nitstext handler:

$('.nitstext').click(function (e) {
   // -------------------------^
   $(this).prop("contenteditable", true).focus();
   e.stopPropagation(); // <===
});