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>