Click事件不工作在contenteditable div

Question

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

（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'); 
 
    \t $('.text').removeClass('active'); 
 
    \t $(this).addClass('active'); 
 
    }); 
 
    
 
    $(".close-icon.active").on("click",function(){ 
 
    alert('hiii'); 
 
    
 
    });

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

變化position與float

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

腳本：

你的元素是動態的，這就是爲什麼該事件不具有約束力。嘗試下面。

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

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

}); 

這裏工作Fiddle

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'); 
 
    \t $('.text').removeClass('active'); 
 
    \t $(this).addClass('active'); 
 
    }); 
 
    
 
    $(document).on("click",".close-icon.active",function(){ 
 
    $(this).parent("div").remove(); 
 
    
 
    });

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