Jquery Seleziona i pulsanti all'interno di div

Question

Vorrei selezionare un gruppo specifico di pulsanti che esistono all'interno di un DIV e assegnare il loro ID a un campo nascosto nella pagina, ma non posso per la vita di me selezionare i pulsanti all'interno del div .. Esempio fallisce sotto

sorgente 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> 

selettore Jquery fallisce

$(".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

Prova:

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

Il tuo primo esempio non riesce perché si sta cercando di indirizzare una classe che è preceduto da . non :. Potresti anche provare a scegliere come target un elemento del pulsante di tipo, ma l'elemento in questione è di tipo submit.

Il secondo esempio non riesce perché si sta tentando di selezionare un input del pulsante di tipo quando non ne esiste nessuno (il proprio obiettivo è di tipo submit). Un'alternativa sarebbe input[type=submit].

Il terzo esempio non riesce per un motivo simile al primo errore in quanto sta cercando un elemento del pulsante di tipo.

Vedi anche http://api.jquery.com/button-selector/

Answer 2

Ciò funzionerà:

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

Answer 3

Mettere uno spazio sembra per qualsiasi classe all'interno apri un la classe .ButtonGroupWrapper. (NOTA: non alcun 'pulsante', ma qualsiasi cosa con il class = "button" codice aggiunto ad essa)

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

Nel codice HTML della inviare ingresso ha una 'classe' di 'pulsante'. Potrebbe effettivamente essere qualcosa come .strawberry o .mybutton o qualsiasi cosa tu voglia.

Alternativa:

Come si dispone di un id avvolgendo l'intero lotto si potrebbe anche pulsante entro l'ID di destinazione:

<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> 

E poi il tuo javascript potrebbe essere:

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

Ricorda che devi eseguire questa operazione dopo che il DOM è stato caricato, quindi è consigliabile scriverlo alla fine della pagina o avvolgere i t nella tua funzione onready preferita.