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>