Событие Click не работает в contenteditable div

Question

Я собираюсь поместить кнопку удаления в div, чтобы пользователь нажал кнопку delete, после чего 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

Если у вас есть какая-либо модификация после загрузки страницы. Эти изменения не зарегистрированы в DOM. Таким образом, вам нужно нацелить неизменный элемент как родителя. Лучше всего вы можете настроить таргетинг на документ или тег тела.

См. Ниже код окончательного кода фрагмента кода.

$("#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>