Click Event funktioniert nicht in contenteditable div

Question

Ich werde eine Löschschaltfläche in der Div platzieren, so dass Benutzer auf die Schaltfläche zum Löschen klicken, dann div wird gelöscht. Aber momentan gab es 2 Probleme.

(1) Die Taste i nicht richtig mit dem Text in der div ausgerichtet platziert

(2) auf der Schaltfläche klicken Ereignis nicht funktioniert.

Bitte beachten Sie meine 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>

Bitte helfen dieses Problem zu lösen.

Answer 1

Ihr Code fast richtig ist, müssen nur wenige Updates.

CSS:

ändern position mit float

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

Script:

Ihr Element ist dynamisch und das ist, warum das Ereignis nicht bindend ist. Versuchen Sie, zu folgen.

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

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

}); 

Hier Fiddle

Answer 2

Wenn Sie ein div nach dem Laden der Seite ändern. Diese Änderungen sind nicht in DOM registriert. Sie müssen also das unveränderte Element als übergeordnetes Element auswählen. Besser ist es, wenn Sie das Dokument oder den Body-Tag als Ziel haben.

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

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

Siehe unten Code Snippet endgültigen Arbeitscode.

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

arbeitet, wenn ich Sie richtig, hier ist der richtige Code für Ihre Aufgabe

<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> 

Keine Notwendigkeit für absolute Position von Symbol

.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; 
    } 

Für mich funktionierte "Klick" gut - ich habe nur den letzten Code in Funktion gesetzt

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

prüfen, wie es hier funktioniert: https://jsfiddle.net/6ek8c0eq/

Answer 4

Position absolute Elemente sollte durch eine Position relative Elemente sonst wird es absolute an das Fenster der Position gewickelt werden.

Verwenden Sie sollten die übergeordnete Schaltfläche entfernen, um den gesamten Knoten zu entfernen.So verwenden parent und 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>