第二次单击无法使用jquery

Question

我有通过php代码动态生成的列表。我想通过点击删除行。我的代码第一次工作正常，第二次

HTML

                    <li>
                        <div class="pers-left-container">
                            <img src="<?php echo $cProduct['thumb']; ?>" />
                        </div>
                        <div class="pers-right-container">
                            <span class="sidebar-product-name"><?php echo $cProduct['name']; ?></span>
                            <a href="javascript:void(0);" class="close-container-product  removeItem">X

                            <form id="removeItemForm" method="post" >
                                <input type="hidden" value="<?php echo $cProduct['product_id']; ?>" name="removeProductId"  class="removePID" />
                            </form>
                            </a><br />
                            <label>Qty: </label><input type="number" value="1" min="0" max="100" step="5" /><br />
                            <span class="price-container-product">Amt: <?php echo $cProduct['price']; ?></span>
                        </div>
                        <div class="clearfix"></div>


                    </li>

JS

$( ".removeItem" ).each(function(index) {
                $(this).click("click",  function(){

                    //var otherInput = $(this).find('.pID').val();
                    removePID = {'removeProductId':$(this).find('.removePID').val()}
                    alert(removePID['removeProductId']);
                    $.ajax({
                        type:"post",
                        url:"index.php?route=common/personaliseyourflowers",
                        data:removePID,
                        success:function(response){
                            //alert(response);
                            if(response) {
                                $(".reloadCOnt").load(window.location + " .reloadCOnt");
                            }
                            //} else {
                                //$(".reloadCOnt").load(window.location + " .reloadCOnt");
                            //}
                        }
                    });
                });
            });

任何人都可以指导我错在哪里。我会谢谢

Answer 1

.click里面.each？!!使用$('body').on('click' , selector , function(){});

$( 'body' ).on("click",".removeItem",  function(){

       //var otherInput = $(this).find('.pID').val();
       removePID = {'removeProductId':$(this).find('.removePID').val()}
       alert(removePID['removeProductId']);
       $.ajax({
       type:"post",
       url:"index.php?route=common/personaliseyourflowers",
       data:removePID,
       success:function(response){
                //alert(response);
                if(response) {
                  $(".reloadCOnt").load(window.location + " .reloadCOnt");
                 }
                 //} else {
                   //$(".reloadCOnt").load(window.location + " .reloadCOnt");
                 //}
               }
      });
});

Answer 2

认为事件委派存在问题，

更改

$(this).click("click",  function(){

到

$(document).on("click", ".removeItem", function(){

Answer 3

使用点击功能和事件来防止href：

$( ".removeItem" ).click(function(e) {
                   e.preventDefault(); // to stop redirecting to href 
                   //var otherInput = $(this).find('.pID').val();
                   removePID = {'removeProductId':$(this).find('.removePID').val()}
                   alert(removePID['removeProductId']);
                   $.ajax({
                        type:"post",
                        url:"index.php?route=common/personaliseyourflowers",
                        data:removePID,
                        success:function(response){
                            //alert(response);
                            if(response) {
                                $(".reloadCOnt").load(window.location + " .reloadCOnt");
                            }
                            //} else {
                                //$(".reloadCOnt").load(window.location + " .reloadCOnt");
                            //}
                        }
                    });
            });