如何使用JQuery使子元素的内容可编辑

Question

我有一组带有nitssection类的html代码，正在显示JQuery的按钮onclick事件，下面有一些文本，我试图使其contenteditable onclick事件，但是我猜是nitssection click事件无法实现。 如我所见， .nitssection事件正在运行，单击时可以看到我的按钮。 例如，我的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>

用于显示按钮，我已经：

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

为了使nitstext类成为可编辑的，我在尝试：

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

我无法实现这一目标。 帮帮我。

Answer 1

元素存在后， contenteditable是一个属性（但是attr应该仍然可以工作，从技术上讲，任何值都使布尔属性为true）。

我认为它使其可编辑，但是它并不明显，因为它似乎并没有获得关注。 在将.focus设置为可编辑后再添加对其的调用似乎可以解决该问题。 另外，您有fucntion而不是function ，这阻止了部分代码运行。

因此，我将更改prop并添加.focus并修正错字：

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

...这似乎起作用（我没有使用nitsid变量注释掉了代码） ：

 $('.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> 

---

旁注：此代码高度可疑：

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

它会在所有.nitsection元素上设置一个单击处理程序，并在单击它们时在该特定.nitsection元素上添加另一个单击处理程序。 每次点击都会再增加一次。 那没有任何意义。

您已经说过这是为了阻止对.nitstext点击触发.nitssection处理程序； 不要在.nitstext处理程序中这样做：

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

Answer 2

工作示例： 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();
});