How to catch an element via jquery in an object created in the bootbox.js plugin?

Question

I have an object created inside a container-Fluid div. I create the object Bootbox without any problem to generate a modal confirm (code below).

$("div.container-fluid").on("click", "button#geraModal", function() {
    bootbox.confirm({
       title: "What is your real name?",
       message: "<div class="row"> <div class="col-md-3>" +
                "<div id="exemplo"> Quero acessar essa DIV </div>" +
                "</div> </div>",
       callback: function(result) {
          if (result === false) {
             alert("Confirm Cancel");
          } else {
             alert("Hi <b>"+result+"</b>");
          }
       }
    });
});

When I try to access some modal object via jQuery it does not work. I can’t access any modal element via jQuery. If I want to run a function. It only works if I put a Javascript inside the div with an event onclick (for example).

I’m trying to access div of the above example as follows:

$("div.container-fluid").on("click", "div#exemplo", function() {
    // Faça algo
    alert("Não passa aqui");
});

Answer 1

The problem is because when the Jquery event handler is evaluated the element you reference does not yet exist (since it is created dynamically). Then you need to inform the event handler that it must match the selector with all elements that exist now and in the future. For this, use the event .live. (http://api.jquery.com/live/)

Your code would look like this:

Jquery

$("#open").click(function (e) {
    bootbox.confirm({
            title: "BOOTBOX",
            message: '<div class="row"><div class="col-md-offset-1"> <p> Options</p> </div> </div>'+
                            '<div id="row1" class="row text-center center-block"> <div class="col-md-offset-3 col-md-3 btn btn-default active" id="exemplo1" > <p> Example 1</p> </div> <div class="col-md-3 btn btn-default" id="exemplo2">  <p> Example 2</p> </div></div>',
            className: "saveExample",
            callback: function(result){
                if (result === true){
                    alert("Test 123");
                }
            }
        });
     });

$("#exemplo1").live("click", function(event){
    alert( "Div 'exemplo1' clicada" ); 
});

$("#exemplo2").live("click", function(event){
    alert( "Div 'exemplo2' clicada" ); 
});

HTML

<a href="#" class="btn btn-inverse" id="open">OPEN BOOTBOX</a>

Example running on Jsfiddle

---

Updating

The event .live() is deprecated from version 1.7 of Jquery, use the event .on():

$(document).on("click", "#exemplo2", function(event){
    alert( "Div 'exemplo2' clicada" ); 
});

The delegate also works:

$(document).delegate("#exemplo1", "click", function(event){
    alert( "Div 'exemplo1' clicada" ); 
});

New example in Jsfiddle

I hope I’ve helped you.