jQuery click not working on button inside contenteditable div

Question

I have the following code. It does the following:

When hovered on a div, a button is appended on to the div. On click of that I'm trying to delete the parent div. But the click event on the button is not triggering. I suspect this is due to the fact that the parent div is contenteditable. Is there anyway to trigger click on the button?

 $(document).ready(function() { jQuery(document).on("mouseover", ".mfx-container", function() { jQuery(".mfx-container").css("outline", "none"); jQuery(this).css("outline", "2px solid #DDE5EC"); jQuery(".editor-hover-buttons").remove(); jQuery(this).append('<button class="editor-hover-buttons delete-block-button" type="reset">Delete</button>'); }) jQuery(document).on("click",".delete-block-button",function(){ alert("delete"); jQuery(this).parent(".mfx-container").remove(); }) }) 

 .mfx-container { min-height: 100px; position: relative; } .delete-block-button { position: absolute; top: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div contenteditable="true"> <div class="container-fluid mf-wpt1-banner mfx-container"> <span class="strong"> Introducing Marketfox!</span> You can now increase conversions on any web page </div> <div class="container mfx-container"> <h2 class="text-center mt30 mb30">Lorem ipsum dolor sit amet</h2> <div class="col-sm-6 lh2 mb30"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum magna turpis. Aliquam ultricies interdum risus, ut interdum justo imperdiet eget. </div> <div class="col-sm-6 lh2 mb30"> Vivamus in placerat odio. Mauris nec augue vitae est facilisis tincidunt. Donec quis commodo mi, quis porta magna. Sed laoreet id lectus ac interdum. </div> <div class="col-sm-6 lh2 mb30"> Vivamus in placerat odio. Mauris nec augue vitae est facilisis tincidunt. Donec quis commodo mi, quis porta magna. Sed laoreet id lectus ac interdum. </div> <div class="col-sm-6 lh2 mb30"> Vivamus in placerat odio. Mauris nec augue vitae est facilisis tincidunt. Donec quis commodo mi, quis porta magna. Sed laoreet id lectus ac interdum. </div> </div> <div class="container mfx-container"> <div class="col-sm-4 p30"> <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> </div> <div class="col-sm-4 p30"> <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> </div> <div class="col-sm-4 p30"> <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> </div> </div> </div> 

Answer 1

It's because your function add a lot of button. I have add a variable for make just one button. Please try

 $(document).ready(function() { var active =0; jQuery(document).on("mouseover", ".mfx-container", function(e) { if(active == 0){ active =1; jQuery(".mfx-container").css("outline", "none"); jQuery(this).css("outline", "2px solid #DDE5EC"); jQuery(".editor-hover-buttons").remove(); jQuery(this).append('<button class="editor-hover-buttons delete-block-button" type="reset">Delete</button>'); } }) jQuery(document).on("mouseout", ".mfx-container", function(e) { if(active == 1){ active =0; } }) jQuery(document).on("click",".delete-block-button",function(){ alert("delete"); jQuery(this).parent(".mfx-container").remove(); }) }) 

 .mfx-container { min-height: 100px; position: relative; } .delete-block-button { position: absolute; top: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div contenteditable="true"> <div class="container-fluid mf-wpt1-banner mfx-container"> <span class="strong"> Introducing Marketfox!</span> You can now increase conversions on any web page </div> <div class="container mfx-container"> <h2 class="text-center mt30 mb30">Lorem ipsum dolor sit amet</h2> <div class="col-sm-6 lh2 mb30"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum magna turpis. Aliquam ultricies interdum risus, ut interdum justo imperdiet eget. </div> <div class="col-sm-6 lh2 mb30"> Vivamus in placerat odio. Mauris nec augue vitae est facilisis tincidunt. Donec quis commodo mi, quis porta magna. Sed laoreet id lectus ac interdum. </div> <div class="col-sm-6 lh2 mb30"> Vivamus in placerat odio. Mauris nec augue vitae est facilisis tincidunt. Donec quis commodo mi, quis porta magna. Sed laoreet id lectus ac interdum. </div> <div class="col-sm-6 lh2 mb30"> Vivamus in placerat odio. Mauris nec augue vitae est facilisis tincidunt. Donec quis commodo mi, quis porta magna. Sed laoreet id lectus ac interdum. </div> </div> <div class="container mfx-container"> <div class="col-sm-4 p30"> <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> </div> <div class="col-sm-4 p30"> <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> </div> <div class="col-sm-4 p30"> <img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> </div> </div> </div>