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>