id属性のjquery selectorが未定義の場合

Question

私は請求書テーブルを持っています。支払う総額を変更すると、テーブルの各レコードの「カスタム」金額を更新したいと考えています。私の問題は、私は私のスクリプトがある（チェックボックスが選択されている）

がここにここに私のマークアップ

<table id="invoicetable" class="table"> 
    <tr> 
     <th>&nbsp;</th> 
     <th nowrap>Invoice</th> 
     <th nowrap>Invoice Date</th> 
     <th nowrap>Due Date</th> 
     <th nowrap>Amount Owed</th> 
     <th nowrap>Payment Amount</th> 
    </tr> 
    <tr id="invoice-20110106-1006-3"> 
     <td> 
      <input checked="checked" id="select-invoice-20110106-1006-3" name="select-invoice-20110106-1006-3" title="choose to not pay anything on this invoice by unchecking this box" type="checkbox" value="true" /><input name="select-invoice-20110106-1006-3" type="hidden" value="false" /> 
      <input id="invoice-invoice-date-20110106-1006-3" name="invoice-invoice-date-20110106-1006-3" type="hidden" value="1/6/2011 12:00:00 AM" /> 
      <input id="invoice-date-due-20110106-1006-3" name="invoice-date-due-20110106-1006-3" type="hidden" value="1/5/2011 12:00:00 AM" /> 
      <input id="invoice-open-amount-20110106-1006-3" name="invoice-open-amount-20110106-1006-3" type="hidden" value="281.680000" /> 
     </td> 
     <td nowrap> 
      <a id="invoice-detail-link-20110106-1006-3" title="click to view invoice details" reportUrl="/Report.aspx?R=Y7QXaCujl%2fldGD1Dnc%40%2fI1B%2feDe2R5sHaszF3VEPpfd31lbsCoJ%2fh2KBORgR4dDx1N%2frHXpmd8GJljmMluJJB%4028%40tkZ%40zJLKKHflYpaLRs*" printableUrl="/Report.aspx?R=Y7QXaCujl%2fldGD1Dnc%40%2fIyRhg5x0ZGIY2AmKFLQWmSVJd1VYBWOs7HG7S0%2fw3WyUlG6lL6XS5jQZm7q1Y52DJv%2f0My5R%2fZ5Ecfet%2fREtaoc*">20110106-1006-3</a> 
     </td> 
     <td nowrap>1/6/2011</td> 
     <td nowrap> 
      <span title="this invoice is past due" class="pastdue">1/5/2011</span> 
     </td> 
     <td nowrap>$281.68</td> 
     <td nowrap><a title="click to change payment amount" id="pay-invoice-20110106-1006-3">$281.68</a> 
      <span id="invoice-payment-20110106-1006-3" style="display:none"> 
       <div style="float:left"><input class="small invoice-payment-amount" id="payment-amount-20110106-1006-3" name="payment-amount-20110106-1006-3" type="text" value="0" /></div> 
       <div style="float:left"><img height="1" src="/Content/Images/Spacer.png" width="6" /><img border="0" id="cancel-payment-20110106-1006-3" src="/Content/images/cross.png" style="cursor:pointer;" title="cancel changes" /></div> 
       <input id="full-payment-amount-20110106-1006-3" name="full-payment-amount-20110106-1006-3" type="hidden" value="281.68" /> 
      </span> 
     </td> 
    </tr> 
</table> 

だと支払われるように選択される項目の支払額を変更したいということです

var amountTimer; 
$('#Amount').keyup(function() { 
    clearTimeout(amountTimer); 
    amountTimer = setTimeout(function() { 
     var amountString = $('#Amount').val(); 

     if (IsNumeric(amountString)) { 
      var amount = parseFloat(amountString); 

      $.each("[id^='select-invoice-']:checked", function() { 
       var invoiceId = $(this).attr('id').substr('select-invoice-'.length); 
       var openAmountString = $('#invoice-open-amount-' + invoiceId).val(); 

       if (IsNumeric(openAmountString)) { 
        var openAmount = parseFloat(openAmountString); 

        if (amount >= openAmount) { 
         $('#pay-invoice-' + invoiceId).click(); 
         $('#payment-amount-' + invoiceId).val(openAmount.toFixed(2)); 
         amount = amount - openAmount; 
        } else if (amount < openAmount && amount > 0) { 
         $('#pay-invoice-' + invoiceId).click(); 
         $('#payment-amount-' + invoiceId).val(amount.toFixed(2)); 
         amount = 0; 
        } else { 
         $(this).click(); 
        } 
       } 
      }); 

     } 

    }, 1000); 
}); 

チェックボックスをオフにしたときにtr全体をフェードアウトし、テキストボックスが変更されたときに合計を再計算し、他のクリックイベントでテキストボックスを表示/非表示にするなど、他のイベントがここにあります。 $.eachセレクタが動作しますが、$(this).attr('id')は未定義を返します。セレクタがIDに基づいて動作しているため、これは奇妙です。

Answer 1

あなたはthe other.each()を使用する必要があります。

$("[id^='select-invoice-']:checked").each(function() { 
    var invoiceId = $(this).attr('id').substr('select-invoice-'.length); 
    /* snip */ 
}); 

$.each()は、オブジェクト、配列、配列のようなオブジェクトを反復処理するために、一般的なイテレータ機能です。

Answer 2

jQueryオブジェクトの代わりにStringを渡しています。

この：

$.each("[id^='select-invoice-']:checked", function() { 

がする必要があります：

$.each($("[id^='select-invoice-']:checked"), function() {