Jquery take the first and second tag inside a div

Question

I’m trying to get the first and second element inside a div. But I’m not getting it.

I’m looking to get the two inputs inside the shipping_table. And by clicking on the inputs they will make a function.

The HTML is:

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

And Javascript is:

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

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

I don’t have much experience with Jquery. So if you can help I appreciate.

Answer 1

The code you have is jQuery and it seems right to me, considering that the :eq() begins in 0. That is the first input within that #shipping_table will be :eq(0).

However, if this content is dynamic, then you need to delegate this event. In this case you can use the .on() thus:

$("#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" );
});

The difference in delegate the event using .on() is that the desired item does not need to be on the page at the time the event handset is registered. Only when the event is triggered will jQuery check.

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

Answer 2

That solves

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

Answer 3

var element = $('#shipping_table').find('input');
element[0].click(function() {
  alert( "função aqui" );
});
element[1].click(function() {
  alert( "função aqui" );
});