How to fire click event of a div contained in a ul

Question

Im trying to get an item in my cart deleted once a user clicks on the delete icon of the item on my dropdown list but it dosnt seem to work. Anyone with an idea, i'll appreciate. Below is my code

$('#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>

I added jquery to your snippet so that it runs, also added `[x]` for the button so there's something to click without font-awesome. Snippet appears to work as intended. — freedomn-m, Mar 11 '19 at 08:53
"doesn't seem to work" - can you elaborate? Do you get the alert but nothing else happens? Do you get the alert, but for the wrong pid? — freedomn-m, Mar 11 '19 at 09:08
If you're not getting an alert, then it's because your selector is incorrect. As presented here, it works - therefore your code here is different from your real code. Are you adding anything dynamically (after the page has loaded)? Try `$(document).on("click", "#delcarts > li .removecart", function() { alert("click"); });` if that works have a read of https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Mar 12 '19 at 08:41
Then this is duplicate of https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Mar 12 '19 at 09:01

Mohamed-Yousef · Answer 1 · 2019-03-12T08:34:08.000

You need to use if for confirm then .closest('li') to get the closest li then use .remove()
Don't use attributes like removecartid = you can use data attribute instead data-removecartid and catch it by .data('removecartid') or .attr('data-removecartid') .. jQuery Data vs Attr?

$(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>

If you dynamically generate the lis you will need Event binding on dynamically created elements?

$(document).on('click' , '#delcarts > li .removecart' , function () {

If you're trying to use 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>

^{Note: By using onclick=removecart(this) in <i> icon or
its parent <a> it will remain the same action}

@Harryiyke if you don't get an alert .. This is because 1: jquery not included .. 2: you dynamically generate the `li`s .. answer updated — Mohamed-Yousef, Mar 12 '19 at 04:30
I have Jquery added already but the issue is that I generated it dynamically like you pointed out. I tried your first script above and yet did not get alert. When I implemented onclick on the DIV, I was getting alert but was not able to retrieve the data from removecartid. — Harryiyke, Mar 12 '19 at 08:20
Finally, I've resolved my problem using the onclick method as suggested by @Mohamed. I moved my script to the header where the list is generated and that's it. Thanks to you guys. you really helped — Harryiyke, Mar 16 '19 at 06:56
You're totally welcome @Harryiyke .And I'm happy you fixed your PC ;) . Have a great day :-) — Mohamed-Yousef, Mar 16 '19 at 11:33

How to fire click event of a div contained in a ul

1 Answers1