jQuery单击不适用于contenteditable div中的按钮

Question

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

将鼠标悬停在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> 

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>