Click事件在contenteditable div中不起作用

Question

我將在div中放置一個刪除按鈕，以便用戶單擊刪除按鈕，然后div將被刪除。 但是目前有兩個問題。

（1）我放置的按鈕與div中的文本未正確對齊

（2）按鈕單擊事件不起作用。

請看我的HTML

 $("#slider").on("change",function(){ var v=$(this).val(); $('.text.active').css('font-size', v + 'px'); }); $('.text').on('focus',function(){ $('.close-icon').addClass('active'); $('.text').removeClass('active'); $(this).addClass('active'); }); $(".close-icon.active").on("click",function(){ alert('hiii'); }); 

 .close-icon { border:1px solid transparent; background-color: transparent; display: inline-block; vertical-align: middle; outline: 0; cursor: pointer; } .close-icon:after { content: "X"; display: block; width: 15px; height: 15px; position: absolute; background-color: #FA9595; z-index:1; right: 35px; top: 0; bottom: 0; margin: auto; padding: 2px; border-radius: 50%; text-align: center; color: white; font-weight: normal; font-size: 12px; box-shadow: 0 0 2px #E50F0F; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="range" min="12" max="120" id="slider" /> <div class="text" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton" type="reset"></div> <div class="text text1" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton1" type="reset"></div> <div class="text text2" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton2" type="reset"></div> <div class="text text3" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton3" type="reset"></div> 

請幫助解決此問題。

Answer 1

您的代碼幾乎正確，只需要很少的更新。

CSS：

用float更改position

/*position: absolute;*/
float:right;

腳本：

您的元素是動態的，這就是事件未綁定的原因。 請嘗試以下。

$(document).on("click",".close-icon",function(){

$(this).closest('div').remove();
//alert('hiii');

});

這是工作提琴

Answer 2

頁面加載后是否修改了div。 這些更改未在DOM中注冊。 因此，您需要將未更改的元素作為父對象。 更好的是您可以定位文檔或正文標簽。

<script>
$(document).on("click",".close-icon",function(){
alert('hiii');    
});

$("body").on("click",".close-icon",function(){
alert('hiii');    
});
</script>

請參見下面的代碼片段最終工作代碼。

 $("#slider").on("change",function(){ var v=$(this).val(); $('.text.active').css('font-size', v + 'px'); }); $('.text').on('focus',function(){ $('.close-icon').addClass('active'); $('.text').removeClass('active'); $(this).addClass('active'); }); $(document).on("click",".close-icon.active",function(){ $(this).parent("div").remove(); }); 

 .close-icon { border:1px solid transparent; background-color: transparent; display: inline-block; vertical-align: middle; outline: 0; cursor: pointer; } .close-icon:after { content: "X"; display: block; width: 15px; height: 15px; position: relative; background-color: #FA9595; z-index:1; left: 100%; top: 0; bottom: 0; margin: auto; padding: 2px; border-radius: 50%; text-align: center; color: white; font-weight: normal; font-size: 12px; box-shadow: 0 0 2px #E50F0F; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="range" min="12" max="120" id="slider" /> <div class="text" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton" type="reset"></div> <div class="text text1" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton1" type="reset"></div> <div class="text text2" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton2" type="reset"></div> <div class="text text3" contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton3" type="reset"></div> 

Answer 3

如果我說對了，這是適合您任務的代碼

<input type="range" min="12" max="120" id="slider" />
    <div class="text"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton" type="reset"></button></div>
    <div class="text text1"  contenteditable="true" style="cursor:grab;">hello<button class="close-icon dbutton1" type="reset"></button></div>
    <div class="text text2"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton2" type="reset"></button></div>
    <div class="text text3"  contenteditable="true"  style="cursor:grab;">hello<button class="close-icon dbutton3" type="reset"></button></div>

無需圖標的絕對位置

.close-icon {
        border:1px solid transparent;
        background-color: transparent;
        display: inline-block;
        vertical-align: middle;
      outline: 0;
      cursor: pointer;
      position: relative;
    }
    .close-icon:before {
        content: "X";
        display: block;
        width: 15px;
        height: 15px;
        background-color: #FA9595;
        margin: auto;
        padding: 2px;
        border-radius: 50%;
        text-align: center;
        color: white;
        font-weight: normal;
        font-size: 12px;
        box-shadow: 0 0 2px #E50F0F;
        cursor: pointer;
    }

對我來說，“點擊”效果很好-我只是將最終代碼放入函數中

$("#slider").on("change",function(){
       var v=$(this).val();
       $('.text.active').css('font-size', v + 'px');
    });

    $('.text').on('focus',function(){
        $('.text').removeClass('active');
        $(this).addClass('active');
    });

    $(".close-icon").on("click",function(){
        $(this).parent().remove();
    });

在這里檢查其工作方式： https ： //jsfiddle.net/6ek8c0eq/

Answer 4

位置absolute元素應由位置relative元素包裝，否則它將absolute位於窗口的位置。

使用應刪除按鈕的父項以刪除整個節點。因此，請使用parent並remove

 $("#slider").on("change", function() { var v = $(this).val(); $('.text.active').css('font-size', v + 'px'); }); $('.text').on('focus', function() { $('.text').removeClass('active'); $(this).addClass('active'); }); $(".close-icon").on("click", function() { $(this).parent().remove() }); 

 .close-icon { border: 1px solid transparent; background-color: transparent; display: inline-block; vertical-align: middle; outline: 0; cursor: pointer; } .text{ position: relative; margin: 20px 0; } .close-icon:after { content: "X"; display: block; width: 15px; height: 15px; position: absolute; background-color: #FA9595; z-index: 1; right: 35px; top: 0; bottom: 0; margin: auto; padding: 2px; border-radius: 50%; text-align: center; color: white; font-weight: normal; font-size: 12px; box-shadow: 0 0 2px #E50F0F; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="range" min="12" max="120" id="slider" /> <div class="text" contenteditable="true" style="cursor:grab;">hello <button class="close-icon dbutton" type="reset"> </div> <div class="text text1" contenteditable="true" style="cursor:grab;">hello <button class="close-icon dbutton1" type="reset"> </div> <div class="text text2" contenteditable="true" style="cursor:grab;">hello <button class="close-icon dbutton2" type="reset"> </div> <div class="text text3" contenteditable="true" style="cursor:grab;">hello <button class="close-icon dbutton3" type="reset"> </div>