2017-02-14 17 views
0

次のコードがあります。次の処理を行います。jQueryのクリックがcontenteditable div内のボタンで機能しない

divに移動すると、divにボタンが追加されます。それをクリックすると、親divを削除しようとしています。しかし、ボタンのクリックイベントは発生していません。私はこれが親のdivがcontenteditableであるという事実のためだと思う。 ボタンをクリックしてトリガーすることはありますか?

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

+0

てみてください:https://jsfiddle.net/Laeg2n82/ – Armin

答えて

3

あなたの機能は、ボタンの多くを追加からです。ボタンを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>

+1

私はOPが機能していない各要素 – Armin

+0

いいえ]ボタンのボタンを削除持って望んでいるかなり確信しています。彼はcontenderitable部門を削除したい –

+0

彼は言った: "しかし、ボタンのクリックイベントはトリガーされていません。 –

関連する問題