单击动态创建的DOM

Question

I have this HTML Bootstrap 3 code for modal window:

<!-- Modal DELETE-->
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Brisanje</h4>
      </div>
      <div class="modal-body">
        Da li ste sigurni da zelite da obrisete ovu parcelu iz baze?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="brisi" class="btn btn-danger">Save changes</button>
      </div>
    </div>
  </div>
</div>

I try to open this modal with code that is dinamicly created:

"targets": 8,
                        "data": "akcija",
                        "render": function(data, type, full, meta) {
                            // return data; 
                            return '<div style="float:right;"><button class="btn btn-warning">Izmeni</button> <button data-toggle="modal" data-target="#delete" class="btn btn-info">Izvestaj o parceli</button> <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i></div>';
                        }

so as you can see I add this: <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i> to DOM , but when I click I canT open modal...

What is the probem here?

Answer 1

It looks like you are trying to write the html to the DOM, but your question is unclear.

Using JQuery you would write the contents on the div to another container taht is already in the DOM like so:

<div id="container"></div>

You can the write the contents to the container with jquery:

$("#container").html('<div style="float:right;"><button class="btn btn-warning">Izmeni</button> <button data-toggle="modal" data-target="#delete" class="btn btn-info">Izvestaj o parceli</button> <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i></div>');