Wie kann ich .on() loopen?

Question

Ich erstelle eine zwei Bindungsfunktionen eine für "ändern" und die andere für "klicken" mit .on(). Es arbeitet an dem ersten Element, das ich ändere, aber es funktioniert nicht mehr am zweiten. Gleiches mit dem "Klick" Ich habe versucht, meine .on() mit ("Selektor") zu umhüllen. Jeder() hofft, es wäre eine Schleife, aber es ist immer noch dasselbe. Kann mir bitte jemand helfen, tut mir leid, ich bin immer noch Neuling auf dieser Sache. Ich möchte nur, dass es für alle Eingabetexte funktioniert, die geändert werden, und für alle Links, auf die geklickt wird. Unten ist mein Code.

//on click 
$("div.productitemcell a").on("click", function() { 
    var t = $(".sc-pn-size .productitemcell").length; 
    if (t > 1) { 
     $("a#catshopbuy").hide(); 
     $("#warning").show(); 
    } 
}); 

//on change 
$("div.productitemcell input").bind("change", function() { 
    var t = $(".sc-pn-size .productitemcell").length; 
    if (t > 1) { 
     $("a#catshopbuy").hide(); 
     $("#warning").show(); 
    } 
}); 

Hier ist der HTML.

<table class="cart"> 
    <tbody> 
     <tr class="var"> 
      <th>Product</th> 
      <th class="quantity">QTY</th> 
      <th class="remove">&nbsp;</th> 
      <th class="price">Price</th> 
      <th class="total" colspan="2">Total</th> 
     </tr> 
     <tr class="val"> 
     <td> 
      <div class="sc-pi">{tag_productimage}</div> 
      <div class="sc-pn"> 
      <div class="sc-pn-box"> 
      <div class="sc-pn-name">{tag_productname}</div> 
      <div class="sc-pn-code">{tag_productcode}</div> 
      <div class="sc-pn-size">{tag_custom2}</div> 
      </div> 
      </div> 
     </td> 
     <td class="quantity"> 
      <div class="productitemcell"> 
      <input type="text" value="1" class="cartInputText"> 
      </div> 
      </td> 
     <td class="remove"> 
      <div class="productitemcell"><a href="#">Remove</a></div> 
     </td> 
     <td class="price">{tag_productextaxamount}</td> 
     <td class="total">{tag_producttotal}</td> 
     </tr> 

     </tbody> 
     </table> 


    <ul> 
    <li>Subtotal:<span>{tag_productgrandtotal}</span></li> 
    <li>Shipping Fee:<span>{tag_shippingtotal}</span></li> 
    <li>Promo Code:<span></span> </li> 
    <li><strong>Total:<span>{tag_invoicetotal}</span></strong></li> 
    </ul> 

<div id="warning" style="display:none;"> 
    <p>You can only purchase one product at a time.</p> 
</div> 

<div class="columns medium-4 pp"> 
<a id="catshopbuy"><img alt="" src="/images/btn-checkout_now.jpg" /></a> 
</div> 

Bitte ignorieren Sie die Tags, die hier gezeigt werden. Diese werden von den cms generiert, die ich verwende. Im Grunde arbeite ich an einem Einkaufswagen, wo Kunden aufgrund von Frachtproblemen nicht mehr als 1 Produkt gleichzeitig auschecken können. So können die Produkte hier in der Zahl wachsen. Der Kunde wird die Menge des Produkts entfernen oder aktualisieren. Als ich ein Produkt entfernte, war es in Ordnung, aber wenn ich ein anderes entfernte, funktionierte es nicht mehr.

Answer 1

Verwenden Sie eine Funktion und Callback.

function callBack() { 
    var t = $(".sc-pn-size .productitemcell").length; 
    if (t > 1) { 
     $("a#catshopbuy").hide(); 
     $("#warning").show(); 
    } 
} 
//on click 
$("div.productitemcell a").on("click", callBack); 
//on change 
$("div.productitemcell input").bind("change", callBack);