Javascript with $(document).ready(function()

Question

I am working with the library bootstrap-table.js of wenzhixin. If after loading the page I run $ ('p').click(function() works perfectly, the problem is if I use some function of the table filter, sort , etc. Then my function does not work.

I tried to change the order, jQuery.noConflict() but nothing.

I attached code.

Many thanks,

I am sorry my English.

<!DOCTYPE html>
<html>
<head>
  <title>Imputacion</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../clases/bootstrap-3.3.6-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../clases/bootstrap-table-develop/src/bootstrap-table.css">
  <script src="../clases/jquery-1.12.3.min.js"></script>
  <script src="../clases/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
  <script src="../clases/bootstrap-table-develop/src/bootstrap-table.js">      </script>
 <script>
 $(document).ready(function(){
   $('p').click(function() {
  alert("It is ok");
 });
 });
 </script>   
</head>
<body>
<div class="container">
                <table id="table"
           data-toggle="table"
           data-show-columns="true"
           data-show-toggle="true"
           data-show-pagination-switch="true"
           data-show-refresh="true"
           data-search="true"
           data-pagination="true"
           data-key-events="true"
           class="table-condensed" style="font-size:0.85em;" >
            <thead>
                <tr>
                <th data-field="codigo" data-sortable="true">codigo</th>
                <th data-field="id" data-sortable="true">Nombre</th>
                <th data-field="name" data-sortable="true" style="text-align:center">Inicio</th>
                <th data-field="price" data-sortable="true">Horario</th>
                <th data-field="a" data-sortable="true">Acción</th>
                </tr>        
            </thead>
            <tbody>
                <tr>
                    <td>EMAK1RF015</td>
                    <td>Eugenio </td>
                    <td style="text-align:center">16:40</td>
                    <td>8</td>
                    <td>    
                        <a href="#" class="abreModalFinal" data-id='123456789' data-toggle="tooltip" title="Final" ><p>Eugenio</p></a>      
                            </td>
                    </tr>   
                    </tbody>
                </table>
</div>
</body>
</html>

Answer 1

Elements are being added/updated later in the life cycle of your webpage, not when DOMContent is ready.

Use Event delegation

$(document).ready(function() {
  $('container').on('click', 'p', function() {
    alert("It is ok");
  });
});

Javascript with $(document).ready(function()

Question

1 answers

solution1
0 2016-05-26 07:10:04

Javascript with $(document).ready(function()

Question

1 answers

solution1 0 2016-05-26 07:10:04

solution1
0 2016-05-26 07:10:04