0

I use function to show dialog with custom headline and text in it. (jQuery)

function callDialog(headline, text_in) {
        $("#spinner-wrapper").after("<div id='Custom_Dialog'><div class='darker-background'></div><div class='custom-dialog'><h3>" + headline + "</h3><hr><p class='birth'>" + text_in + "</p></br><button style='float: right;' id='Dialog_Button' class='btn btn-primary'>Okay</button></div></div>");
    }

(Dialog shows exactly how I want) And I use function to hide it, but this function don't work for some reasons. I tried using click() and on("click", function() {}); etc...

$('.darker-background').on('click', function(){
        alert("Clicked");
        $('#Custom_Dialog').fadeOut(500);
    });
Testauskas
  • 1
  • 3
  • 1
    You are selecting the element before it exists on the page. Either add the listener it when you add the element to the DOM or use event delegation. – epascarello Jan 26 '18 at 18:27
  • @epascarello I tried adding "button" after "click". It doesn't work either – Testauskas Jan 26 '18 at 18:32
  • I am guessing you did not do it the correct way. The way for event delegation is `$(document).on("click", '.darker-background', function(){ });` – epascarello Jan 26 '18 at 18:34
  • 1
    @epascarello This should work? ` $(".activation-dialog").on("click", '#Activation_Button', function(){` – Testauskas Jan 26 '18 at 18:39
  • Hard to tell since that code does not match anything provided. That code is saying `$(".activation-dialog")` is on the page when you add the event. So if you did `console.log($(".activation-dialog").length)` when you are adding the event, it would not be zero. – epascarello Jan 26 '18 at 18:43
  • @epascarello Your provided code solved me a big puzzle. Thank you! – Testauskas Jan 26 '18 at 18:50
  • Your other option would have been `var dlg = $("
    ...
    "); dlg.find('.darker-background').on("click", function(){}); $("#spinner-wrapper").after(dlg);`     – epascarello Jan 26 '18 at 18:54

0 Answers0