I am trying to attach handler to dynamic created element I am doing this but it isn't work
custom1.js
$(document).ready(function(){
var kart=[];
var found=0;
$(".adTo").on("click",function(){
var name,quantity,price,temp;
name=$(this).parent().children(".name").html().toString();
price=$(this).parent().children(".price").html().toString().substring(2,this.length);
found=0;
temp=kart.length;
for(var i=0;i<kart.length;i++)
{
console.log(kart[i].name);
if((kart[i].name==name))
{
console.log("ni");
kart[i].quantity++;
$(".cartStatus").children("#"+name).children(".quantity").html("Quantity: "+kart[i].quantity);
kart.price=kart.price+parseInt(kart[i].price);
$("#totalCartA").html("Total Amount:"+kart.price);
found=1;
break;
}
}
if(found==0)
{
console.log("ni1");
kart[kart.length]={
"name":name,
"quantity":1,
"price":price
};
$("#cartStatus").append("<div id='"+name+"' class='cartItems mt8'><div class='lf'>"+(temp+1)+"</div><div class='lf mr10'>"+kart[temp].name+"</div><div id='"+name+"' class='reduction rf mr10'>Remove[x]</div><div class='clr bdr'></div><div class='lf quantity'>Quantity: "+kart[temp].quantity+"</div><div class='mr10 rf'>Price: "+kart[temp].price+"</div><div class='clr'></div></div>");
$("#totalCartP").html("Products:"+kart.length);
kart.price=kart.price+parseInt(kart[temp].price);
}
});
$(".reduction").on('click',function(){
console.log('nitin');
console.log($(this));
$(this).parent().remove();
kart.splice(temp, 1);
regenKart(1,temp);
});
function regenKart(howMany, indexFrm){
for(var i=indexFrm; i<(kart.length );i++)
{
kart[i].index=kart[i].index-howMany;
console.log('a');
}
}
});
and this is my view page...
<!DOCTYPE html>
<html>
<head>
<!--script src="/js/jquery.min.js"></script-->
<link rel="stylesheet" href="/css/ekart/style.css" type="text/css" media="all" />
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">EKART</div>
<ul class="menuLinks">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clr"></div>
</div>
<!--div class="welComeBar">
<div class="lf mt5">
Welcome Shopper name
</div>
<div class="rf mt5">
<a class="logout" href="javascript:void(0);">Logout</a>
</div>
<div class="clr"></div>
</div-->
<div class="seacrhBar">
<div class="mt5">
<form id="user" action="/do/ekart/userindex/searchproduct/" method="POST" enctype="multipart/form-data">
<select name="category" name="category" id="category">
<option value="">Select your category...</option-->
<?php
foreach($result as $row)
{
echo "<option value='".$row['cat_name']."'> ".$row['cat_name']." </option>";
}
?></select>
<input type="text" value="" name="product" placeholder="Enter Product Name" />
<input type="submit" value="GO" />
</form>
</div>
<div class="clr"></div>
</div>
<div class="mainBody">
<div class="itemWrapper" style= <?php $visible="";echo "'display:".$visible.";'"?> >
<?php foreach($products as $row) { ?>
<div class="itemS">
<div class="name"><?php echo $row['Pro_name'];?></div>
<div class="image"><img src="data:image/jpeg;base64,<?php echo base64_encode($row['image']);?>" alt="No photo" height="100" width='145'/> </div>
<div class="price">Rs <?php echo $row['cost'];?></div>
<a class="adTo" href="javascript:void(0);">Add To Cart</a>
</div>
<?php }?>
</div>
<div id="cartStatus" class="cartStatus">
<div class="yourCart mt8">Your Cart</div>
<div class="yourCart mt8" id="totalCart"><span id="totalCartP">Products:0</span><span class="rf" id="totalCartA">Total Amount: 0</span></div>
<div class="cartStatus1"></div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>
X </ul>
<div class="clr"></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/custom1.js"></script>
</body>
</html>
I am dynamically creating a division cartItems in which there is a subdivision with tag remove i want that when this tag is clicked the cartItem is automatically removed from cart list. I have assign reduction as class name to this division but found myself unable to attach this division with handler using this class name.I have also print "nitin" on console inside this handler to check weather handler is attached with remove tag or not but nothing gets printed on console.I dont know what to do now..
asked Jul 19, 2014 at 15:48
Nitin9791
1,1441 gold badge14 silver badges18 bronze badges
1 Answer 1
When using on() for dynamic elements, the syntax is
$("#cartStatus").on('click', '.reduction', function() { ...
where you pass in an element that exists at the time of binding the event, and where the second argument after the event is the selector to filter on.
answered Jul 19, 2014 at 15:50
adeneo
319k29 gold badges410 silver badges392 bronze badges
default