jquery Selektor auf ID gibt undefiniert für ID-Attribut

Question

Ich habe eine Rechnungstabelle. Wenn ich einen zu zahlenden Gesamtbetrag ändere, möchte ich die "benutzerdefinierten" Beträge für jeden Datensatz in einer Tabelle aktualisieren. Mein Problem ist, dass ich möchte nur die Beträge, die auf Einzelteilzahlung zu ändern, die zu zahlen sind ausgewählt, um (a Kontrollkästchen aktiviert ist)

Hier ist mein Markup

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

und hier ist mein Skript

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); 
}); 

Hier sind andere Ereignisse mit Elementen verknüpft, z. B. das Ausblenden des gesamten tr, wenn die Option deaktiviert ist, das Neuberechnen der Gesamtsumme bei Änderung des Textfelds und das Ein-/Ausblenden des Textfelds bei anderen Klickereignissen. Was passiert, ist der $.each Selektor funktioniert, aber $(this).attr('id') gibt undefined zurück. Das ist seltsam, weil der Selektor basierend auf der ID arbeitet.

Answer 1

sollten Sie the other.each() werden:

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

$.each() ist eine generische Iterator-Funktion, über Objekte zu iterieren, Arrays und Array-ähnlichen Objekten.

Answer 2

Sie übergeben einen String anstelle eines jQuery-Objekts.

dies:

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

müssten sein:

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