Witam
Toczę nierówną walkę z dynamicznie dodawanymi przyciskami. Pojawiają się one po przeładowaniu strony przez Ajax w wyniku akcji na kontrolce select.
Żebym mógł je obsłużyć, muszę je wcześniej delegować do document:
$(document).on('click','.button1', function() {
// some code...
});
W ten sam sposób jest obsłużony drugi przycisk (button2). Obydwa przyciski po kliknięciu wyświetlają stworzony ręcznie popup.:
<div id="popup_confirm_main" class="popup_confirm_main">
<div id="popup_confirm" class="popup_confirm">
<div id="popup_confirm_text" class="popup_confirm_text">SOME TEXT</div>
<div id="popup_confirm_btn_ok_div" class="popup_confirm_btn_ok_div">
<button type="button" id="popup_confirm_btn_ok" class="button-alert-normal" name="popup_confirm_btn_ok">
OK
</button>
</div>
<div id="popup_confirm_btn_cancel_div" class="popup_confirm_btn_cancel_div">
<button type="button" id="popup_confirm_btn_cancel" class="button-cancel-normal" name="popup_confirm_btn_cancel">
ANULUJ
</button>
</div>
</div>
</div>
button1:
$(document).on('click','.button1', function() {
showMonitAlert(); // wyświetlenie popup
if($('.popup_confirm').length > 0){
$(document).one('click','.popup_confirm_btn_ok_div', function(){
$('.popup_confirm_main').fadeOut(200);
alert('jestem button1');
});
$(document).one('click','.popup_confirm_btn_cancel_div', function(){
$('.popup_confirm_main').fadeOut(200);
});
}
});
button2:
$(document).on('click','.button2', function() {
showMonitAlert(); // wyświetlenie popup
if($('.popup_confirm').length > 0){
$(document).one('click','.popup_confirm_btn_ok_div', function(){
$('.popup_confirm_main').fadeOut(200);
alert('jestem button2');
});
$(document).one('click','.popup_confirm_btn_cancel_div', function(){
$('.popup_confirm_main').fadeOut(200);
});
}
});
I teraz: Wciskam przycisk button1, w wyświetlonym popupie wciskam przycisk popup_confirm_btn_cancel_div, popup się zamyka.
Następnie wciskam button2, pojawia się popup, wciskam popup_confirm_btn_ok_div i wtedy w wyniku bubblingu (tak myślę) wywołuje mi najpierw
zdarzenie z button1 czyli wyświetla alert: jestem button1 a następnie z button2 alert: jestem button2.
Zjawisko to nie występuje, kiedy nie korzystam z przycisku popup_confirm_btn_cancel_div w popup.
Próbowałem już event.preventDefault(), eventStopPropagation(), event.stopImmediatePropagation() oraz return false - nie działa.
Czy spotkał się ktoś z Szanownych Kolegów z takim problemem i udało mu się go rozwiązać?