3

Estou tentando pegar o primeiro e o segundo elemento dentro de uma div. Mas não estou conseguindo.

Estou querendo pegar os dois inputs dentro do shipping_table. E ao clicar nos inputs eles irão fazer uma função.

O HTML é:

<table class="table" id="shipping_table">   <tr style="cursor:pointer">
    <td style="width:16px;">
        <label class="radio">
            <input type="radio" id="s2ba82f8be158554d1aefa1fd27ea9001" data-deliverytime="13" value="PAC|27.8|13" name="shipping_method" checked="checked">         </label>
    </td>
    <td onclick="toggle_shipping('s2ba82f8be158554d1aefa1fd27ea9001');" style="width:120px;">
        PAC     </td>
    <td onclick="toggle_shipping('s2ba82f8be158554d1aefa1fd27ea9001');">

        <strong>R$ 27,80</strong><br><span class="label label-info">Entrega em torno de 13 dias úteis</span>        </td>
</tr>

<tr style="cursor:pointer">
    <td style="width:16px;">
        <label class="radio">
            <input type="radio" checked="checked" id="s527db0b075ea188067f95de4b5ab90e2" data-deliverytime="5" value="SEDEX|72.9|5" name="shipping_method">         </label>
    </td>
    <td onclick="toggle_shipping('s527db0b075ea188067f95de4b5ab90e2');" style="width:120px;">
        SEDEX       </td>
    <td onclick="toggle_shipping('s527db0b075ea188067f95de4b5ab90e2');">

        <strong>R$ 72,90</strong><br><span class="label label-info">Entrega em torno de 5 dias úteis</span>     </td>
</tr>

E O Javascript é:

$("#shipping_table input:eq(1)").click(function() {
  alert( "função aqui" );
});

$("#shipping_table input:eq(2)").click(function() {
  alert( "função aqui" );
});

Não tenho muita experiência com Jquery. Então se puderem ajudar eu agradeço.

2
  • Felipe, esses inputs são carregados com a página ou inseridos depois?
    – Sergio
    Commented 26/08/2015 às 14:26
  • Acredito que são inseridos depois. Commented 26/08/2015 às 14:36

3 Respostas 3

3

O código que tens é jQuery e parece-me certo, tendo em conta que o :eq() começa em 0. Ou seja o primeiro input dentro desse #shipping_table será :eq(0).

Porem se esse conteúdo é dinamico, então precisas de delegar esse evento. Nesse caso podes usar o .on() assim:

$("#shipping_table").on('click', 'input:eq(0)', function() {
  alert( "função 1 aqui" );
});

$("#shipping_table").on('click', 'input:eq(1)', function() {
  alert( "função 2 aqui" );
});

A diferênça em delegar o evento usando .on() é que o elemento pretendido não precisa estar na página na altura em que o auscultador de evento é registado. Somente na altura do evento ser acionado é que o jQuery vai fazer a verificação.

jsFiddle: http://jsfiddle.net/hfaz4hvd/

2
  • Funcionou, consegue me explicar por que não funciona o outro código? Commented 26/08/2015 às 14:46
  • Juntei mais info na resposta.
    – Sergio
    Commented 26/08/2015 às 17:02
2

Isso resolve

$(function (){
    $("#shipping_table input:eq(0)").click(function() {
      alert($(this).val());
    });

    $("#shipping_table input:eq(1)").click(function() {
      alert($(this).val());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="shipping_table">   <tr style="cursor:pointer">
    <td style="width:16px;">
        <label class="radio">
            <input type="radio" id="s2ba82f8be158554d1aefa1fd27ea9001" data-deliverytime="13" value="PAC|27.8|13" name="shipping_method" checked="checked">         </label>
    </td>
    <td onclick="toggle_shipping('s2ba82f8be158554d1aefa1fd27ea9001');" style="width:120px;">
        PAC     </td>
    <td onclick="toggle_shipping('s2ba82f8be158554d1aefa1fd27ea9001');">

        <strong>R$ 27,80</strong><br><span class="label label-info">Entrega em torno de 13 dias úteis</span>        </td>
</tr>

<tr style="cursor:pointer">
    <td style="width:16px;">
        <label class="radio">
            <input type="radio" checked="checked" id="s527db0b075ea188067f95de4b5ab90e2" data-deliverytime="5" value="SEDEX|72.9|5" name="shipping_method">         </label>
    </td>
    <td onclick="toggle_shipping('s527db0b075ea188067f95de4b5ab90e2');" style="width:120px;">
        SEDEX       </td>
    <td onclick="toggle_shipping('s527db0b075ea188067f95de4b5ab90e2');">

        <strong>R$ 72,90</strong><br><span class="label label-info">Entrega em torno de 5 dias úteis</span>     </td>
</tr>
        </table>

3
  • Qual é a diferença do código do Felipe para o código que propões? podes explicar porque o teu código resolve e como?
    – Sergio
    Commented 26/08/2015 às 14:27
  • Bom, não funciona. Acho que é por que o input é inserido depois. Como resolver? Commented 26/08/2015 às 14:41
  • Felipe, o meu código é executado logo que a página é carregada. Se você carrega os inputs em outro momento seria melhor você mostrar em que momento isso é feito pra que eu consiga indicar como você pode vincular os eventos. A princípio é simples, é só atribuir os eventos ao inputs após a criação do elemento na tela. Commented 26/08/2015 às 15:36
1
var element = $('#shipping_table').find('input');
element[0].click(function() {
  alert( "função aqui" );
});
element[1].click(function() {
  alert( "função aqui" );
});
3
  • É eles são gerados automaticamente. E se fosse pegar direto pelo ID seria melhor colocar o ID sem a div, já que o ID é único. Commented 26/08/2015 às 14:02
  • alterei o código para suprir sua necessidade Commented 26/08/2015 às 14:03
  • bom eu tentei, mas não funcionou. Não sei por que. =/ Commented 26/08/2015 às 14:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .