javascript click event not firing

Question

I'm having trouble figuring out why my click event is not firing. I am trying to click on the trash can icon and have a function run that deletes the list element. After the click event, it fails to execute anything else in the script. It doesn't even console.log anything directly below. Below is the markup and my script.

HTML CODE

<div class="col-6">
    <div class="js-list-item">
        <h3 class="js-list-title"></h3>
        <a href="" id="js-edit"><i class="fa fa-pencil" aria-hidden="true"></i></a>
        <a href=""id="js-delete"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
        <p>Date: <span class="js-date"></span></p>
        <p>Schedule: <span class="js-schedule"></span> at <span class="js-schedule-time">
        </span></p>
    </div>
</div>

javascript code

function handleDelete() {
$('.js-list-item').on('click', 'fa-trash-o', function(e) {
    console.log('test');
    e.preventDefault();
    deleteShow(
        $(e.currentTarget).closest('.js-list-item').attr('id')
    );
});
}

When is your function handleDelete called? You need to execute that function first for binding the listener — Saurabh Tiwari, Jun 10 '17 at 20:16
handleDelete is called at the bottom of the file, like so. $(function() { handleDelete();}); — Jameson, Jun 10 '17 at 20:17
deleteShow() is an ajax delete request, but it isn't even trying to execute it. I have the console.log directly below it to test if it's even getting to the next line and it is not. After the click fires it stops trying to do anything else. I put a breakpoint to confirm — Jameson, Jun 10 '17 at 20:20

score 4 · Answer 1 · answered Jun 10 '17 at 20:18

4

The second parameter of the .on() function is a selector.

http://api.jquery.com/on/

Change:

$('.js-list-item').on('click', 'fa-trash-o', function(e) {

to:

$('.js-list-item').on('click', '.fa-trash-o', function(e) {

answered Jun 10 '17 at 20:18

Dem Pilafian

5,625
6
39
67

@Jameson, also add a space to change `` to ``. Or even better: ``. The `#` tells modern browsers not to actually load the page on click. Check out: https://stackoverflow.com/a/34834047 – Dem Pilafian Jun 10 '17 at 20:26

score 0 · Answer 2 · answered Jun 10 '17 at 20:18

0

('click', 'fa-trash-o', function(e)

fa-trash-o is not a proper selector, use class or id

answered Jun 10 '17 at 20:18

mele

66
10

javascript click event not firing

2 Answers2