1

Me explico. quiero crear varios elemento

$("#restriction").click(function(){
      efect = false; //No tiene nada que ver
      redraw(); //Tampoco tiene algo que ver
      v = $('#inputRess').val();
      if (v <= 1) {
        $("#Nanswer").html("<div class='alert alert-warning alert-dismissible fade show' role='alert'><strong>¡Ups!&nbsp;&nbsp;</strong>Al menos dos restricciónes.<button type='button' class='close' data-dismiss='alert' aria-label='Close' onclick='inputRess.disabled=false;'><span aria-hidden='true'>&times;</span></button></div>");
      }else{
        $(".boxAcount").hide();
        //NgenerarM();
        mat = "";
        for(var k = 0; k < 2; k++) {
            mat += "<label class='obj"+k+"' data-toggle='tooltip' data-placement='top' tooltip-title='Introduzca el objeto/utilidad N°"+(k+1)+".'>";
            mat += "<div class='input-group input-group-sm'>";
            mat += "<div class='input-group-prepend'><span class='input-group-text' id='basic-addon1'>Objeto "+(k+1)+"</span></div>";
            mat += "<input type='text' class='form-control' id='ob"+k+"'>";
            mat += "</div></label>";
        }
        mat += "<button type='button' class='btn btn-default btn-block' id='afterObj'>Block level button</button>";
        $("#Nmatriz").append(mat); //Acá creo todos los elementos
      }
});
$("#afterObj").click(function(){ //Acá quiero usar el button creado en el último mat llamado afterObj
    $("#Nmatriz").append('hola');
});

Pero a la vez quiero usarlos. No sé si se puede, pero al intentarlo el boton ni siquiera envía a consola

2 respuestas 2

3

Los elementos que se vayan agregando después de la carga inicial del DOM no son reconocidos pero si son existentes, por lo cual debes usar delegate para asignar los eventos a hijos dada una selección particular y no un elemento especifico. Para usar delegate debes seleccionar un contenedor padre y asignar la acción en los hijos.

Ejemplo:

$( "body" ).delegate( "p", "click", function() {
  alert( $( this ).text() );
});

Otro ejemplo:

$( "body" ).delegate( "p", "click", function() {
  $( this ).after( "<p>Another paragraph!</p>" ); 
});

También puedes delegar un evento en el evento de la siguiente manera:

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});
2

El problema que tienes es que no enlazas el evento click con los nuevos elementos, es decir creas elementos y creastes el evento click pero nunca lo enlazas es decir cada uno anda por su lado; hice un ejemplo resumido de lo que tu estas haciendo y el otro como deberias de hacerlo:

Como tu lo tienes:

$("#agregar").click(function(){
  
  let htmlE = "<button type='button' class='btn btn-default btn-block' id='afterObj'>Block level button</button>";
   
  $("#nuevos-elementos").append(htmlE);
   
});

$("#afterObj").click(function(){ 
  alert("Si, me distes click!!!")
});
#nuevos-elementos{
  border:1px solid red;
  padding:5px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<button id="agregar">Agregar nuevo elementos</button>

<div id="nuevos-elementos"></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Como veras es un ejemplo similar al tuyo donde vas creando nuevos elementos y creas el evento click pero nunca se entienden, ahora te colocare como debe de ser:

$("#agregar").click(function(){
  
  let htmlE = "<button type='button' class='btn btn-default btn-block afterObj'>Block level button</button>";
   
  $("#nuevos-elementos").append(htmlE);
  $(".afterObj:last").on("click",function(){
    alert("Si, me distes click!!!, soy el botón "+($(this).index()+1)+" creado")
  });
   
});
#nuevos-elementos{
  border:1px solid red;
  padding:5px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<button id="agregar">Agregar nuevo elementos</button>

<div id="nuevos-elementos"></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Aquí movi el evento click inmediatamente luego del append() ya que estoy creando el elemento e inmdiatamente le asigno el evento click, tambien le hice referencia a dicho objeto por la clase y no por un id porque si lo haces solo por el id solo te hara el vento click el primero y los demas no. En resumen el problema era el momento en el cual debes asignar el evento. Espero que sea lo que andas buscando.

3
  • Hola @DavidLeonardoMolinaRuizDav he observado algunas de sus respuesta la mayor parte sobre jQuery o javascript puedes echarme una mano con esta pregunta por favor, estoy tratando de crear una paginación con ajax hasta el momento he logrado traer los datos pero no se como generar los botones de la paginación y con enviar información al ajax y que este me la muestre por ejemplo en el filtro de mostrar más filas de resultados, puedes ayudarme :)
    – J. Mick
    Commented el 20 oct. 2018 a las 1:50
  • Claro mi info esta en mi perfil mañana comunicate conmigo ya voy de salida, saludos Commented el 20 oct. 2018 a las 1:55
  • Muchas gracias, entendí mi error Commented el 20 oct. 2018 a las 3:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.