jQuery event delegation

Necesito ayuda con las devoluciones de llamada. Por alguna razón, no funcionan realmente bien.
Estoy haciendo un juego con jQuery. Tengo un

para todos los botones que van a estar en el juego. El juego tendrá dos botones que realizan acciones y una pregunta sobre él. La pregunta está controlada por un

. Lo que quiero saber es que, por algún motivo, no puedo establecer funciones de callback para los ID del botón. En el ejemplo, tendría el sí o el no, que tienen su propia identificación establecida a través de jQuery así:

$('#button').html('');
Pero por alguna razón, podría establecer esto:

 $('yes').click(function(){ //function I would want }); 

Por supuesto, eso no es lo que mi código tiene, eso fue solo un ejemplo. Aquí está el código real:

 $(document).ready(function(){ $('#main,#batman,#car,#cop,#hobo,#knife,#gangfight,#ganggun,#gangknife,#blood,#hr').hide(-100); var hr=$('#hr'); var main=$('#main'); var batman=$('#batman'); var car=$('#car'); var hobo=$('#hobo'); var cop=$('#cop'); var knife=$('#knife'); var gangfight=$('#gangfight'); var ganggun=$('#ganggun'); var gangknife=$('#gangknife'); var blood=$('#blood'); var text=$('#text'); var button=$('#button'); $('#start').html('Are you ready to play?'); $('#button').html(''); $('#yes').click(function(){ $('#yes,#no').hide(function(){ $('#start').hide(); main.fadeIn(-100); hr.fadeIn(-100,function(){ text.delay(1000).html("You were just wandering around in the streets of new york, when suddenly.. You see batman!! You've never really liked him, what do you do?") button.html('',function(){ batman.fadeIn(1000); $('fight').click(function(){ }); $('leave').click(function(){ text.fadeOut(function(){ text.text('Good call. As you leave, you encounter a hobo. What do you do?'); }); }); }); }); }); }); $('#no').click(function(){ $('#yes,#no').hide(); $('#start').text('Oh, okay then. Come back later!'); }); }); 

Me pregunto … ¿Cómo puedo configurar las funciones de callback para ‘pelear’ y ‘salir’?
Si te preguntas por qué hay todas estas variables al principio, esas son solo las imágenes y los personajes.

No puede configurar un controlador de click en un elemento que no existe. Lo que debes hacer es usar .on para unir un elemento más arriba del árbol. Algo como:

 $("#someparentelement").on("click", "#yes", function() { // your code }); 

¿Qué versión de jQuery estás usando? Probablemente deberías usar jQuery.on () en esta situación ya que el código del controlador de clics probablemente se ejecute antes de que el botón esté realmente disponible en el DOM.

 $("#button").on("click", "#yes", function (event) { // Your yes-button logic comes here. }); 

Para obtener más detalles y posibilidades, lea sobre el .on(events [, selector ] [, data ], handler(eventObject)) en la documentación de jQuery :

Si el selector se omite o es nulo, al controlador de eventos se lo denomina directo o vinculado directamente. El controlador se invoca cada vez que ocurre un evento en los elementos seleccionados, ya sea que ocurra directamente en el elemento o burbujas de un elemento descendiente (interno).

Cuando se proporciona un selector, el controlador de eventos se denomina delegado. El controlador no se llama cuando el evento ocurre directamente en el elemento vinculado, sino solo para los descendientes (elementos internos) que coinciden con el selector. jQuery burbujea el evento desde el objective del evento hasta el elemento donde está conectado el controlador (es decir, el elemento más interno al más externo) y ejecuta el controlador para cualquier elemento a lo largo de esa ruta que coincida con el selector.

En este caso, desea delegate el evento ya que su elemento aún no está disponible en DOM cuando está vinculando el evento.

No use el click() , use on('click') y adjúntelo al documento.

Al crear un controlador de esta manera, se asegurará de que cualquier elemento nuevo pueda desencadenar el evento.

$ (‘lucha’) selecciona etiqueta de lucha, no la etiqueta con id de lucha. Intenta usar $ (‘# fight’) en su lugar.