jQuery单击contenteditable div中的not working on按钮

admin

我有以下代码。它执行以下操作：

当悬停在div上时，一个按钮会附加到div上。单击该按钮后，我正在尝试删除父div。但是按钮上的单击事件不会触发。我怀疑这是因为父div是可满足的。有没有触发点击按钮的方法？

?

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

?

转载请注明出处:http://www.aqguliang.com/article/20230330/1057018.html