javascript - una - Adjuntar evento de clic a un objeto JQuery aún no agregado al DOM

quitar evento click jquery

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Enlace de eventos a elementos creados dinámicamente? 20 respuestas

He estado teniendo problemas para conectar el evento click a un objeto JQuery antes de agregarlo al DOM.

Básicamente tengo este botón que devuelve mi función, luego lo anexo al DOM. Lo que quiero es devolver el botón con su propio controlador de clic. No deseo seleccionarlo del DOM para adjuntar el controlador.

Mi código es este:

createMyButton = function(data) {

  var button = $(''<div id="my-button"></div>'')
    .css({
       ''display'' : ''inline'',
       ''padding'' : ''0px 2px 2px 0px'',
       ''cursor'' : ''pointer''
     }).append($(''<a>'').attr({
       //''href'' : Share.serializeJson(data),
       ''target'' : ''_blank'',
       ''rel'' : ''nofollow''
     }).append($(''<image src="css/images/Facebook-icon.png">'').css({
       "padding-top" : "0px",
       "margin-top" : "0px",
       "margin-bottom" : "0px"
     })));

     button.click(function () {
        console.log("asdfasdf");
     });

     return button;     
}

El botón que devuelve no puede detectar el evento click. Sin embargo, si hago esto (después de que el botón se agrega al DOM):

$(''#my-button'').click(function () {
    console.log("yeahhhh!!! but this doesn''t work for me :(");
});

Funciona ... pero no para mí, no es lo que quiero.

Parece estar relacionado con el hecho de que el objeto aún no es parte del DOM.

Oh! Por cierto, estoy trabajando con OpenLayers, y el objeto DOM al que estoy añadiendo el botón es un OpenLayers.FramedCloud (que aún no forma parte del DOM, pero que será una vez que se desencadenen un par de eventos).

Answer 1

¿El uso de .live funciona para usted?

$("#my-button").live("click", function(){ alert("yay!"); }); 

http://api.jquery.com/live/

EDITAR

A partir de jQuery 1.7, el método .live () está en desuso. Use .on () para adjuntar manejadores de eventos. Los usuarios de versiones anteriores de jQuery deben usar .delegate () en preferencia a .live ().

http://api.jquery.com/on/

Answer 2

Complemento de información para aquellas personas que usan .on () para escuchar eventos vinculados a las entradas dentro de las últimas celdas de tabla cargadas; Logré vincular los manejadores de eventos a tales celdas de tabla usando delegate (), pero .on () no funcionaría.

Ligé la identificación de la tabla a .delegate () y usé un selector que describe las entradas.

p.ej

HTML

<table id="#mytable">
  <!-- These three lines below were loaded post-DOM creation time, using a live callback for example -->
  <tr><td><input name="qty_001" /></td></tr>
  <tr><td><input name="qty_002" /></td></tr>
  <tr><td><input name="qty_003" /></td></tr>
</table>

jQuery

$(''#mytable'').delegate(''click'', ''name^=["qty_"]'', function() {
    console.log("you clicked cell #" . $(this).attr("name"));
});

Answer 3

El método jQuery .on se utiliza para vincular eventos incluso sin la presencia de elementos en la carga de la página. Aquí está el http://api.jquery.com/on/ Se usa de esta manera:

 $("#dataTable tbody tr").on("click", function(event){
    alert($(this).text());
 });

Antes de jquery 1.7,. Se usó el método http://api.jquery.com/live/ , pero ahora está en desuso.

Answer 4

En el evento

$(''#my-button'').on(''click'', function () {
    console.log("yeahhhh!!! but this doesn''t work for me :(");
});

O agrega el evento después de agregar

Answer 5

Estoy realmente sorprendido de que nadie haya publicado esto todavía

$(document).on(''click'',''#my-butt'', function(){
   console.log(''document is always there'');
}) 

Si no está seguro de qué elementos van a estar en esa página en ese momento, simplemente conéctelo al document .

Nota: esto no es óptimo desde la perspectiva del rendimiento: para obtener la velocidad máxima, se debe intentar adjuntar al elemento primario más cercano del elemento que se va a insertar.

Answer 6

Pruebe esto ... Reemplace el cuerpo con el selector principal

$(''body'').on(''click'', ''#my-button'', function () {
    console.log("yeahhhh!!! but this doesn''t work for me :(");
});

Answer 7

Tal vez bind () ayudaría:

button.bind(''click'', function() {
  alert(''User clicked'');
});

Answer 8

Tienes que agregarlo. Crea el elemento con:

var $div = $("<div>my div</div>");
$div.click(function(){alert("clicked")})
return $div;

Entonces, si lo agrega, funcionará.

Eche un vistazo a su ejemplo here y una versión simple here .

Answer 9

Tratar:

$(''body'').on({
    hover: function() {
        console.log("yeahhhh!!! but this doesn''t work for me :(");
    },
    click: function() {
        console.log("yeahhhh!!! but this doesn''t work for me :(");
    }
},''#my-button'');

jsfiddle example .

Cuando usa .on () y vincula a un elemento dinámico, necesita hacer referencia a un elemento que ya existe en la página (como body en el ejemplo). Si puede usar un elemento más específico que mejore el rendimiento.

Los controladores de eventos están vinculados solo a los elementos seleccionados actualmente; deben existir en la página en el momento en que su código realiza la llamada a .on (). Para garantizar que los elementos estén presentes y puedan seleccionarse, realice el enlace de eventos dentro de un manejador de documentos listos para los elementos que están en el marcado HTML en la página. Si se está inyectando HTML nuevo en la página, seleccione los elementos y adjunte controladores de eventos después de colocar el nuevo HTML en la página. O bien, use eventos delegados para adjuntar un controlador de eventos, como se describe a continuación.

Src: http://api.jquery.com/on/

Answer 10

Utilizar esta. Puedes reemplazar el cuerpo con cualquier elemento padre que exista en dom listo

$(''body'').on(''click'', ''#my-button'', function () {
     console.log("yeahhhh!!! but this doesn''t work for me :(");
});

Mire aquí http://api.jquery.com/on/ para obtener más información sobre cómo usar on () ya que reemplaza a live () a partir de 1.7+.

A continuación se enumera qué versión debe usar

$ (selector) .live (eventos, datos, controlador); // jQuery 1.3+

$ (documento) .delegate (selector, eventos, datos, manejador); // jQuery 1.4.3+

$ (documento) .on (eventos, selector, datos, controlador); // jQuery 1.7+