Question

我正在尝试将处理程序附加到动态创建的元素我正在这样做但它不起作用

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

}

});

这是我的观点页面......

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

我正在动态创建一个分区cartItems，其中有一个带有标记删除的细分我希望当单击此标记时，cartItem会自动从购物车列表中删除。我已经将减少作为班级名称分配到这个部门，但发现自己无法使用此类名称将该部门与处理程序相连。我还打印了＃34; nitin＆＃34;在这个处理程序内的控制台上检查天气处理程序是否附带删除标签或没有，但没有任何东西在控制台上打印。我不知道现在该做什么..

Answer 1

对动态元素使用on()时，语法为

$("#cartStatus").on('click', '.reduction', function() { ...

在其中传入绑定事件时存在的元素，以及事件之后的第二个参数是要过滤的选择器。

将处理程序附加到动态创建的元

1 个答案: