0

私が欲しいのは、最後のリストのタブキーを使用してメニューを選択すると、アラートを受け取りたいということです。私が持っているjqueryを使用すると、アラートが表示されますが、最後のメニューだけでなく、すべての選択メニューでアラートが表示されます。

HTMLマークアップ

<div id="invoiceLinesForm" style="">
<ul id="sortable" class="ui-sortable">
    <li id="headerLine">
        <div class="qty">Aantal</div>
        <div class="description">Omschrijving</div>
        <div class="price">Bedrag EUR</div>
        <div class="total">Totaal</div>
        <div class="vat">BTW</div>
        <div class="actions"></div>
        <div class="clear"></div>
    </li>

    <li id="firstLine">
        <div class="qty"><input type="text" name="invoice_line[0][qty]" value="1" class="qty_input"></div>
        <div class="description"><textarea name="invoice_line[0][description]"></textarea></div>
        <div class="price"><input type="text" name="invoice_line[0][price]" value="0.00" style="text-align:right;"></div>
        <div class="total">0,00</div>
        <div class="vat">
            <select name="invoice_line[0][vat]">
                <option value="0.21">21%</option>
                <option value="0.06">6%</option>
                <option value="0.00">0%</option>
            </select>
        </div>
        <input type="hidden" name="invoice_line[0][total]" class="line_total" value="0">
        <input type="hidden" name="invoice_line[0][vat_amount]" class="line_vat_amount" value="0">
        <input type="radio" class="line_selector" style="display:none;">

        <div class="actions"><span class="delLine">Verwijder </span><span>Slepen</span></div>
        <div class="clear"></div>
    </li>

    <li class="extraLine">
        <div class="qty"><input type="text" name="invoice_line[1][qty]" value="1" class="qty_input"></div>
        <div class="description"><textarea name="invoice_line[1][description]"></textarea></div>
        <div class="price"><input type="text" name="invoice_line[1][price]" value="0.00" style="text-align:right;"></div>
        <div class="total">0,00</div>
        <div class="vat">
            <select name="invoice_line[1][vat]">
                <option value="0.21">21%</option>
                <option value="0.06">6%</option>
                <option value="0.00">0%</option>
            </select>
        </div>
        <input type="hidden" name="invoice_line[1][total]" class="line_total" value="0">
        <input type="hidden" name="invoice_line[1][vat_amount]" class="line_vat_amount" value="0">
        <input type="radio" class="line_selector" style="display:none;">

        <div class="actions"><span class="delLine">Verwijder </span><span>Slepen</span></div>
        <div class="clear"></div>
    </li>
    <li class="extraLine">
        <div class="qty"><input type="text" name="invoice_line[2][qty]" value="1" class="qty_input"></div>
        <div class="description"><textarea name="invoice_line[2][description]"></textarea></div>
        <div class="price"><input type="text" name="invoice_line[2][price]" value="0.00" style="text-align:right;"></div>
        <div class="total">0,00</div>
        <div class="vat">
            <select name="invoice_line[2][vat]">
                <option value="0.21">21%</option>
                <option value="0.06">6%</option>
                <option value="0.00">0%</option>
            </select>
        </div>
        <input type="hidden" name="invoice_line[2][total]" class="line_total" value="0">
        <input type="hidden" name="invoice_line[2][vat_amount]" class="line_vat_amount" value="0">
        <input type="radio" class="line_selector" style="display:none;">

        <div class="actions"><span class="delLine">Verwijder </span><span>Slepen</span></div>
        <div class="clear"></div>
    </li>
</ul>

jquery

$('.vat select').live('keyup', function(e) 
{ 
    if (e.keyCode == 9) 
    {               
        $(this).blur(function(e)
        {
            if($(this).parent().parent().is('li:last'))
            {
                alert('last item');
            }

            e.preventDefault();
            e.stopImmediatePropagation();

        });                 
    } 

});
4

3 に答える 3

3 
    if($(this).parents("li").is(':last-child'))
    {
        alert('last item');
    }

デモ： http： //jsfiddle.net/UtHKR/3/

于 2012-12-06T09:13:09.593 に答える
1 
$('.vat select').live('keyup', function(e) 
{ 
    if (e.keyCode == 9) 
    {               
        $(this).blur(function(e)
        {
            if($(this).parent().parent().is($(':last'))
            {
                alert('last item');
            }

            e.preventDefault();
            e.stopImmediatePropagation();

        });                 
    } 

});
于 2012-12-06T09:12:32.970 に答える
0

私はアーレンスのヒントを真剣に受け止め、あなたにいくつかのインプットを与えます。私の解決策は次のとおりです。

// Use on, so there is only one event listener
$('#sortable').on('keyup', '.vat select', function(event) {
    // Cache your event target
    var $select = $(this);

    if (event.keyCode == 9) {   

        $select.blur(function(event) {
            event.preventDefault();
            event.stopImmediatePropagation();

            var $clostestLi = $select.closest('li');

            if($clostestLi.is(':last-child') == true) {
                alert('last item');
            }
        });                 
}
});

フィドル： http： //jsfiddle.net/qLGeb/

于 2012-12-06T09:58:43.187 に答える