html datatables

[destor77]

hola gente,
estoy teniendo un problemilla con el datatables jquery y codeigniter, tengo mi html que es este:
en mi php tengo esto:

Código PHP:

$tabla = $this->Players->playerAll();
       $tabla->add_column('edit', '<a href="jugadores/editar/$1"><i class="glyphicon glyphicon-edit" title="Editar"></i></a> 
                                   <a href="#jugadores/borrar/$1" class="del" id="delete"><i class="glyphicon glyphicon-trash" title="Editar"></i></a> 
                                   <a id="view" href="jugadores/ver/$1"><i class="glyphicon glyphicon-eye-open" title="Ver info"></i></a>', 'u.id');
 
       $results = $tabla->generate('json');
 

El cual genera las filas (en la columna acciones agrega los links ) de la tabla html que tiene el siguiente código:

Código HTML:

<ol class="breadcrumb bc-3">
    <li>
    <a href="<?php echo base_url('admin');?>"><i class="entypo-home"></i>Inicio</a>
    </li>
    <li class="active">
        <strong>Jugadores</strong>
    </li>
</ol>
 
<h2>Listado de Jugadores</h2>
<br />
<?php
if(alert())
{?>
<div class="row">
    <div class="col-sm-12">
        <?php echo alert();?>    
    </div>
</div>
<?php
}
?>
<table class="table table-bordered datatable" id="table-1">
    <thead>
        <tr>
            <th>#Id</th>
            <th>Username</th>
            <th>Email</th>
            <th>City</th>
            <th>Activo</th>
            <th>Balance</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
    <tfoot>
        <tr>
            <th>#Id</th>
            <th>Username</th>
            <th>Email</th>
            <th>City</th>
            <th>Activo</th>
            <th>Balance</th>
            <th>Acciones</th>
        </tr>
    </tfoot>
</table>
 

dentro de esa vista tengo este codigo js:

Código Javascript:

<script type="text/javascript">
    $(function() {
  console.log('hola');
    $("#delete").click(function(e) {
            console.log('entro');
            return false;
            e.preventDefault();
            var url = $(".delete").attr('href');
            $('#modal-4').modal('show', {backdrop: 'statuc'});
 
        });  
});
    jQuery(document).ready(function($)
    {
 
        $("#table-1").dataTable({
            "sPaginationType": "bootstrap",
            "iDisplayLength": 5,
            "aLengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "Todos"]],
            "bStateSave": true,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '<?php echo base_url(); ?>admin/jugadores/list_all',
            "fnInitComplete": function () {
            },
            'fnServerData': function (sSource, aoData, fnCallback) {
                $.ajax
                ({
                    'dataType': 'json',
                    'type': 'POST',
                    'url': sSource,
                    'data': aoData,
                    'success': fnCallback
                });
            }
        }
        );
        
        $(".dataTables_wrapper select").select2({
            minimumResultsForSearch: -1
        });
    });
</script>
 

Lo que no me esta funcinando es que cuando hago click en el link para borrar deberia mostrar el modal (mas alla del return false que hay ahora) y no muestra nada. En la consola me muestra "hola" por ende el jquery lo toma bien, pero no me muestra "entro", y no entiendo porque me hace eso. Será porque a las filas las carga por json?
Espero que me puedan dar una mano....
Desde ya muchas gracias!

[diurno10]

claro, es xq las filas las cargas por ajax, por lo tanto el dom ya se cargo y jquery en esa instancia no lo reconoce, pero utilizando jQuery.on , no tendrias problemas.

si tu version de jQuery es mayor o igual a 1.7, sino tenes que utilizar .live
$("#delete").on("click",function(e) {
console.log('entro');
return false;
e.preventDefault();
var url = $(".delete").attr('href');
$('#modal-4').modal('show', {backdrop: 'statuc'});

});

[destor77]

Iniciado por diurno10

claro, es xq las filas las cargas por ajax, por lo tanto el dom ya se cargo y jquery en esa instancia no lo reconoce, pero utilizando jQuery.on , no tendrias problemas.

si tu version de jQuery es mayor o igual a 1.7, sino tenes que utilizar .live
$("#delete").on("click",function(e) {
console.log('entro');
return false;
e.preventDefault();
var url = $(".delete").attr('href');
$('#modal-4').modal('show', {backdrop: 'statuc'});

});

Hola diurno10,
intente como me dijiste poniendo asi:

Código Javascript:

<script type="text/javascript">
    jQuery(document).ready(function($)
    {
        $("#table-1").dataTable({
            "sPaginationType": "bootstrap",
            "iDisplayLength": 5,
            "aLengthMenu": [[5,10, 25, 50, -1], [5,10, 25, 50, "Todos"]],
            "bStateSave": true,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": '<?php echo base_url(); ?>panel/premios/list_all',
            "fnInitComplete": function () {
            },
            'fnServerData': function (sSource, aoData, fnCallback) {
                $.ajax
                ({
                    'dataType': 'json',
                    'type': 'POST',
                    'url': sSource,
                    'data': aoData,
                    'success': fnCallback
                });
            }
        }
        );
        
        $(".dataTables_wrapper select").select2({
            minimumResultsForSearch: -1
        });
 
        $(".del").on("click",function(e) {
            console.log('entro');
            return false;
            e.preventDefault();
            var url = $(".del").attr('href');
            $('#modal-4').modal('show', {backdrop: 'statuc'});
 
        });  
    });
</script>
 

pero cuando hago click en el link se ejecute directamente no toma el return false estoy haciendo algo mal?