Question

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

当悬停在div上时，会在div上附加一个按钮。点击那个我试图删除父div。但是按钮上的单击事件不会触发。我怀疑这是因为父div是可信的。无论如何都要点击按钮？

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是因为你的功能增加了很多按钮。我只为一个按钮添加了一个变量。请尝试

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

jQuery点击不工作在contenteditable div内的按钮

1 个答案: