CODEWITHSUNDEEP
jquerybinding
Mary
Mary

Reputation: 1

How can I loop .on()?

I'm creating a two binding functions one for "change" and the other for "click" using .on(). It works on the first element that I change but it no longer works on the second. Same with the "click" I've tried to wrap my .on() with ("selector").each() hoping it would loop but it still the same. Can someone please help, sorry I'm still newbie on this thing. I just want it to work for all input text that will be changed and all links that will be clicked. Below is my 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();
    }
});

Here's the 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>

Please disregard the tags that are shown here. These are generated from the cms I'm using. Basically, I'm working on a shopping cart where customer is prevented to check out more than 1 product at a time due to freight issues. So, the products here can grow in number. Customer will remove or update the quantity of the product. When I removed one product it was fine but when I removed another it no longer works.

Upvotes: 0

Views: 22

Answers (1)

rrk
rrk

Reputation: 15846

Use a function and do 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);

Upvotes: 1

Related Questions