Jquery Seleccionar botón (s) dentro de div

Question

Me gustaría seleccionar un grupo específico de botones que existen dentro de un DIV y asignar su ID a un campo oculto en la página pero no puedo por mi vida seleccionar los botones dentro del div .. Ejemplo cae por debajo de

fuente HTML

<div id = test> 
    <div class="ButtonGroupWrapper">      
        <img src="test.jpg" width="100" height="100" alt="thumbnail" /> 
       <input id="buttonID5" type="submit" value="Link" class="button" /> 
    </div> 
    <div class="ButtonGroupWrapper">      
        <img src="test.jpg" width="100" height="100" alt="thumbnail" /> 
       <input id="buttonID6" type="submit" value="Link" class="button" /> 
    </div> 
    </div> 

selector de jQuery falla

$(".ButtonGroupWrapper").find(":button").click(function() { 
     alert("hi there"); 
     return false; 
    }); 

    $("#ButtonGroupWrapper input[type=button]").click(function() { 
     alert("hi there"); 
     return false; 
    }); 

    $("#ButtonGroupWrapper :button").click(function() { 
     alert("hi there"); 
     return false; 
    }); 

Answer 1

Probar:

$(".ButtonGroupWrapper").find(".button").click(function() { 
     alert("hi there"); 
     return false; 
}); 

Su primer ejemplo falla porque usted está tratando de apuntar a una clase que es precedido por . no :. También puede estar intentando apuntar a un elemento del botón de tipo, pero el elemento en cuestión es del tipo enviar.

Su segundo ejemplo falla porque está tratando de seleccionar una entrada de tipo botón cuando ninguno existe (su objetivo es enviar tipo). Una alternativa sería input[type=submit].

Su tercer ejemplo falla por una razón similar al primer error de ejemplo en que está buscando un elemento del botón de tipo.

Ver también http://api.jquery.com/button-selector/

Answer 2

Esto funcionará:

$(".ButtonGroupWrapper").find(".button").click(function() { 
    alert("hi there"); 
    return false; 
}); 

Answer 3

Poner un espacio busca cualquier clase .button dentro de su clase .ButtonGroupWrapper. (NOTA: no cualquier 'botón', pero nada con la clase "botón" código = agregado a él)

$(".ButtonGroupWrapper .button").click(function() { 
    alert("hello"); 
    return false; 
}); 

en el código HTML de la presente entrada tiene una 'clase' de 'botón'. En realidad podría ser algo como .strawberry o .mybutton o lo que quieras.

Alternativa:

Como usted tiene un id envolver la totalidad del lote que podría también botón dentro de la ID de destino:

<div id ="test"> 
    <div>      
    <img src="test.jpg" width="100" height="100" alt="thumbnail" /> 
    <input type="submit" value="Link" class="button" /> 
    </div> 
    <div>      
    <img src="test.jpg" width="100" height="100" alt="thumbnail" /> 
    <div class="button" />Just text</div> 
    </div> 
</div> 

Y entonces su javascript podrían ser:

$("#test .button").click(function() { 
    alert("button class clicked"); 
    return false; 
}); 

Recuerda que necesitas ejecutar esto después de que el DOM se haya cargado, así que lo mejor es escribirlo al final de la página o envolverlo t en su función lista de favoritos.