JQuery click is not working

Question

I have following simple html block:

<span class="change_ordering show-list" data-ordering-by="product_list" data-ordering-direction="desc">By list</span>

Then, I have following js-code:

$(document).ready(function() {
    $('.show-list').click(function() {
        console.log('qwe');
    });
});

When I click on it - nothing happens. But when I paste this js-code to Google Chrome JS console, it works perfectly. JS works fine on my site, I can make other JQuery actions. I also tried to write $('.change_ordering.show-list') and $('span.change_ordering.show-list') and $('span.show-list'), but still no progress. What I'm missing?

EDIT: This element is not drowing by ajax. I don't understand why it's duplicate.

Fundamentally, that code *will* work. The only reason it wouldn't is if the span doesn't exist in the document as of when you run `$('.show-list')` (e.g., it's added later). — T.J. Crowder, Jul 18 '16 at 08:39
Your code actually works. See this fiddle. https://jsfiddle.net/gvp01wLL/ . Any errors that you get in console when you try this — Shubham Khatri, Jul 18 '16 at 08:45
So by accepting Paresham's answer you show that the span is created after the page has loaded. — mplungjan, Jul 18 '16 at 10:07
@mplungjan When I disable JavaScript in browser I still can see this span. It's not creating by ajax. — Vittore Gravano, Jul 18 '16 at 10:36
@mplungjan That is the point. It works only if I will write `$(document).on("click",".show-list",function(){})`. — Vittore Gravano, Jul 18 '16 at 12:45
Which is called event delegation and is only needed when the span is not available (with that class) at document.ready time — mplungjan, Jul 18 '16 at 13:56

score 0 · Accepted Answer · answered Jul 18 '16 at 08:42

0

Please apply click using following way

$(document).on("click",".show-list",function(){})

It will work

answered Jul 18 '16 at 08:42

pareshm

4,874
5
35
53

3

Explain please why it is different and why it'd work. – Al.G. Jul 18 '16 at 08:43
It works for dynamic appending of dom elements also – pareshm Jul 18 '16 at 08:45
Miracle, it works for me. I have no idea why, but thanks a lot! – Vittore Gravano Jul 18 '16 at 08:46
1

@pareshm I *do* know, but since this is *your* answer, *you* are the one who should explain it :) – Al.G. Jul 18 '16 at 08:50

JQuery click is not working

1 Answers1