How Take An Element That Appear When I Click A Button

Suppose to have an html page and when I click on one button I read:' I need to handle when I click 'ok' that is html code:

Let me know if it did not work. Check this Working Codepen

Solution 2:

I am suggesting to use Bootbox JS. it is based on Bootstrap layout.

You can achieve that you need as mentioned below

bootbox.confirm("Are you sure?", function(result) {
  // write your code what you need to handle on OK button
}); 

Solution 3:

You may use the event show.bs.modal:

//// On modal show//
$(document).on('show.bs.modal', function (e) {
  //// attach the click event  for OK button//
  $('button[data-bb-handler="cancel"][type="button"]').on('click', function (e) {
    console.log("CANCEL BUTTON PRESSED");
  });

  //// attach the click event  for CANCEL button//
  $('button[data-bb-handler="confirm"][type="button"]').on('click', function (e) {
    console.log("OK BUTTON PRESSED");
  });
});

 $(document).ready(function() {
  $('#myBtn').on('click', function (e) {
    bootbox.confirm("Are you sure you wish to discard this post?", function () {
    });
  }).trigger('click');
});

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://code.jquery.com/jquery-2.1.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><scriptsrc="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script><buttonid="myBtn"type="button"class="btn btn-primary">Click Me</button>

This is the bootbox.confirm message. For deatils you may refer to Bootbox.js.

When you click on the ok or cancel the dialog dom element is removed from the document.

So you have to use the callback function:

$(document).on('click.bootbox', function(e, result){
  console.log("Pressed "+ result);
});

bootbox.confirm("Are you sure you wish to discard this post?", function(result) {
  $(document).trigger('click.bootbox', result);
});

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="https://code.jquery.com/jquery-2.1.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><scriptsrc="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>