如何使用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();
});