Pregunta La función jQuery no es vinculante para los elementos dom recién agregados


Aquí está index.html:

<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function() {
      $('.btn_test').click(function() { alert('test'); });
    });

    function add(){
      $('body').append('<a href=\'javascript:;\' class=\'btn_test\'>test</a>');
    }

  </script>
</head>
<body>
  <a href="javascript:;" class="btn_test">test1</a>
  <a href="javascript:;" onclick="add()">add</a>
</body>

Si hago clic en test1 enlace, muestra alert('test'), pero si hago clic en add enlace y luego haga clic en test, no muestra nada

¿Podrías explicarlo?


73
2018-06-30 15:35


origen


Respuestas:


Para los usuarios que llegan a esta pregunta después de 2011, hay una nueva forma adecuada de hacerlo:

$(document).on('click', '.btn_test', function() { alert('test'); });

Esto es a partir de jQuery 1.7.

Para más información, ver Eventos directos y delegados


201
2017-08-14 21:42



Necesita utilizar un oyente de clic "activo" porque inicialmente solo existirá el elemento único.

$('.btn_test').live("click", function() { 
   alert('test'); 
});

Actualización: como Live está en desuso, debe usar "on ()":

$(".btn_test").on("click", function(){ 
   alert("test");
});

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


34
2018-06-30 15:37



Tengo el mismo problema que la pregunta. Estaba a punto de tirarme del pelo y obtuve la solución. Estaba usando sintaxis diferente

$(".innerImage").on("click", function(){ 
alert("test");
});

no funcionaba para mí (innerImage dinámicamente creado dom) Ahora estoy usando

$(document).on('click', '.innerImage', function() { alert('test'); });

http://jsfiddle.net/SDJEp/2/

gracias @Moshe Katz


15
2018-02-14 03:28



.click se une a lo que está visible actualmente para jQuery. Necesitas usar .live:

$('.btn_test').live('click', function() { alert('test'); });

8
2018-06-30 15:37



Use Jquery vivir en lugar. Aquí está la página de ayuda para ello http://api.jquery.com/live/

$('.btn_test').live(function() { alert('test'); });

Editar: live() está en desuso y deberías usar on() en lugar.

$(".btn_test").on("click", function(){ 
   alert("test");
});

6
2018-06-30 15:38



Esto se debe a que el evento de clic solo está vinculado al elemento existente en el momento del enlace. Debe usar en vivo o delegar, que vinculará el evento a elementos existentes y futuros en la página.

$('.btn_test').live("click", function() { alert('test'); });

Jquery Live


3
2018-06-30 15:38



necesitas oyente en vivo en lugar de hacer clic:

$('.btn_test').live('click', function() { 
   alert('test'); 
});

La razón es que el click solo asigna elementos al oyente cuando se carga la página. Cualquier nuevo elemento agregado no tendrá este oyente en ellos. Live agrega el oyente click al elemento cuando la página se carga y cuando se agregan luego


2
2018-06-30 15:37



Cuando el documento se carga, agrega oyentes de eventos a cada clase coincidente para escuchar el evento de clic en esos elementos. El mismo oyente no se agrega automáticamente a los elementos que agregue a la Dom más adelante.


1
2018-06-30 15:37