jQuery .on ('clic', func) función no está haciendo su trabajo

Question

Cómo crear el tema:

1. clic en los enlaces de activación existentes - algo sucede (PASS)
2. clic en el gatillo "add botón ", que añade un nuevo eslabón de gatillo w/misma clase
3. clic en el enlace de nueva creación, y que no hace lo mismo que el 1er 2 enlaces que existieron desde el principio (fallo)

Aquí está mi ejemplo: http://jsbin.com/equjig/3/edit

Pensé que la función .on('click', func) era buena para agregar eventos a los elementos actuales en el dom, ¿pero también para los elementos futuros que se agregan a la dom?

Aquí es mi Javascript actual:

$(document).ready(function() { 
    $(".link").on('click', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
    }); 

    $("#b1").on('click', function() { 
    $("#p1").append("<a href='#' class='link'>new trigger</a>"); 
    }); 

aquí es el código HTML

<button type="button" id="b1">add trigger</button> 
    <p id="p1"> 
    <a href="#" class="link">trigger 1</a> 
    <a href="#" class="link">trigger 2</a> 
    </p> 
    <div id="out"></div> 

Nota - im usando jQuery 1.7

Gracias!

Answer 1

Usted está casi allí con el ...

ejemplo de trabajo: http://jsbin.com/equjig/6/edit

$(document).ready(function() { 
    $('#p1').on('click','.link', function(e) { 
     e.preventDefault(); 
     $("#out").append("clicked<br/>"); 
    }); 
}); 

Esto funcionará - debe seleccionar un div padre de los .link elementos (he utilizado $('#p1') aquí, como en su jsbin)

Answer 2

El evento onclick se aplica solo a los elementos que ya existen. Necesita usar la función .live.

Answer 3

.on() también puede comportarse como .delegate() que se utiliza como esto:

//#p1 is the context and .link is what will be bound to as long as the .link element is a descendant of #p1 
$('#p1').on('click', '.link', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
}); 

Aquí está la documentación para .on(): http://api.jquery.com/on

Answer 4

De acuerdo con la documentación de la API para on la firma .on('click', func) replica comportamientos .bind 's - que es decir, vincula al oyente con todos y cada uno de los elementos existentes en la colección.

Para obtener comportamientos .delegate - es decir, que se unen a todos y cada evento que se origina a partir de un determinado tipo de elemento (hijo), incluyen un selector:

$("parent-selector").on('click', 'your-selector', func) 

Answer 5

Cambiar el .on() a. vivir()

$(document).ready(function() { 
    $(".link").live('click', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
    }); 

    $("#b1").on('click', function() { 
    $("#p1").append("<a href='#' class='link'>new trigger</a>"); 
    }); 
}); 

Answer 6

Puede utilizar .on() partir de la versión 1.7, y también reemplaza un poco el antiguo .live() excepto en cómo proporciona la sintaxis.

Usando .on() puede delegar el caso a cualquier elemento padre como esto:

$(document.body).on('click','.link',function() { 
    // handler for all present and future .link elements inside the body 
}); 

De esta manera, también funcionará para futuros elementos que se agregan en el interior del cuerpo que tiene el className 'link'.

me hizo una pequeña modificación a su pelusa que funciona de la forma esperada: http://jsbin.com/adepam. Y aquí está el código:

$(document).ready(function() { 
    $(document.body).on('click', '.link', function(e) { 
    e.preventDefault(); 
    $("#out").append("clicked<br/>"); 
    }); 
    $("#b1").on('click', function() { 
    $("#p1").append("<a href='#' class='link'>new trigger</a>"); 
    }); 
});