How to make contenteditable to child element using JQuery

Question

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 1

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

Answer 2

Working example: https://jsfiddle.net/q8yax2t5/4/

HTML:

<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>

JS:

$('.nitssection').find('a').each(function () {
    $(this).removeAttr("href");
});

$(document).on('click', '.nitstext', function() {
  this.contentEditable = true;
  $(this).focus();
});