点击事件在contenteditable div中无效 [英] Click event is not working in contenteditable div

问题描述

我要在div中放置一个删除按钮，以便用户点击删除按钮，然后div将被删除。但目前有2个问题。

（1）我放置的按钮与div

中的文本不正确对齐

（2）按钮点击事件无效。

请参阅我的html

div class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  .close-icon {border：1px solid transparent; background-color：transparent; display：inline-block; vertical-align：middle;轮廓：0; cursor：pointer; } .close-icon：after {content：X;显示：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;颜色：白色; 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 =rangemin =12max =120id = /> < div class =textcontenteditable =truestyle =cursor：grab;> hello< button class =close-icon dbuttontype =reset>< / div> < div class =text text1contenteditable =truestyle =cursor：grab;> hello< button class =close-icon dbutton1type =reset>< / div& < div class =text text2contenteditable =truestyle =cursor：grab;> hello< button class =close-icon dbutton2type =reset>< / div& < div class =text text3contenteditable =truestyle =cursor：grab;> hello< button class =close-icon dbutton3type =reset>< / div>  
 

请帮助解决这个问题。

CSS： / p>

使用 float

更改位置
$ b

  / * position：absolute; * / 
 float：right; 
   

脚本：

您的元素是动态的，这就是为什么事件不绑定。请尝试以下操作。

  $（document）.on（click，。close-icon，function b 
 $ b $（this）.closest（'div'）。remove（）; 
 // alert（'hiii'）; 
 
} 
  

这里正在工作 小提琴

i am going to place a delete button in the div so that user click the delete button then div will be deleted . But currently there were 2 problem .

(1)The button i placed is not properly aligned with the text in the div

(2)The button click event is not working .

Please see my 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>

Please help to solve this .

解决方案

Your code is almost right just need few updates.

CSS:

Change position with float

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

Script:

Your element is dynamic and that's why the event is not binding. Try following.

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

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

});

Here is working Fiddle

这篇关于点击事件在contenteditable div中无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！