如何触发ul中包含的div的click事件

时间:2019-03-11 08:49:46

标签: jquery events

我试图在用户单击我的下拉列表中的项目的删除图标后删除我购物车中的项目,但它似乎不起作用。任何有想法的人,我将不胜感激。下面是我的代码

$('#delcarts > li .removecart').on('click', function () {
    var pid = $(this).attr('removecartid');
    var conf = confirm("Are you sure you want to delete item? "+pid);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="delcarts">
 <li class="box-li-cart">
    <div class="col-xs-3 col-md-3 box-cart-book"><img src="'.$book_image.'"/></div>
        <div class="col-xs-8 col-md-8 minicart-data">
            <p class="mc-name">'.$book_title.'</p>
            <p>'.$qty.' X '.$cursymb.' '.$book_price.'</p>
        </div>
    <div removecartid="'.$bid.'" id="removecart" class="btn-remove-prod removecart"><a>[X]<i class="fa fa-times" aria-hidden="true"></i></a></div>
</li>
</ul>

1 个答案:

答案 0 :(得分:0)

  • 您需要使用scala> var stream = senv.addSource(new FlinkKafkaConsumer[String]("topic", new SimpleStringSchema(), properties)).print() <console>:69: error: overloaded method value addSource with alternatives: [T](function: org.apache.flink.streaming.api.functions.source.SourceFunction.SourceContext[T] => Unit)(implicit evidence$10: org.apache.flink.api.common.typeinfo.TypeInformation[T])org.apache.flink.streaming.api.scala.DataStream[T] <and> [T](function: org.apache.flink.streaming.api.functions.source.SourceFunction[T])(implicit evidence$9: org.apache.flink.api.common.typeinfo.TypeInformation[T])org.apache.flink.streaming.api.scala.DataStream[T] cannot be applied to (org.apache.flink.streaming.connectors.kafka.FlinkKafkaConsumer[String]) var stream = senv.addSource(new FlinkKafkaConsumer[String]("topic", new SimpleStringSchema(), properties)).print() 进行确认,然后使用if得到最接近的.closest('li'),然后使用li

  • 请勿使用.remove()之类的属性,而可以使用removecartid =属性代替data并通过data-removecartid.data('removecartid')来捕获它。 {3}}

.attr('data-removecartid')
$(document).on('click' , '#delcarts > li .removecart' , function () {
    var pid = $(this).attr('data-removecartid');
    var conf = confirm("Are you sure you want to delete item? "+pid);
    if(conf){
      $(this).closest('li').remove();
    }
});

如果动态生成<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="delcarts"> <li class="box-li-cart"> <div class="col-xs-3 col-md-3 box-cart-book"><img src="'.$book_image.'"/></div> <div class="col-xs-8 col-md-8 minicart-data"> <p class="mc-name">Book title</p> <p>Qty && Book Price</p> </div> <div data-removecartid="someid" id="removecart" class="btn-remove-prod removecart"><a ><i class="fa fa-times" aria-hidden="true">Remove</i></a></div> </li> </ul>,则需要this

li

如果您尝试使用$(document).on('click' , '#delcarts > li .removecart' , function () {

onclick=
function removecart(el) {  //el here
    var pid = $(el).closest('.removecart').attr('data-removecartid'); // el here
    var conf = confirm("Are you sure you want to delete item? "+pid);
    if(conf){
      $(this).closest('li').remove();
    }
};

  

注意:通过使用<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="delcarts"> <li class="box-li-cart"> <div class="col-xs-3 col-md-3 box-cart-book"><img src="'.$book_image.'"/></div> <div class="col-xs-8 col-md-8 minicart-data"> <p class="mc-name">Book title</p> <p>Qty && Book Price</p> </div> <div data-removecartid="SomeId_Here" id="removecart" class="btn-remove-prod removecart"> <a> <i class="fa fa-times" aria-hidden="true" onclick="removecart(this)">Remove</i> </a> </div> </li> </ul>图标中的onclick=removecart(this)或   其父项<i>将保持不变