Click event / bind event not working in jQuery when generating buttons in Mustache JS

Question

I have a button which is generated in a function via a mustache JS template.

{{#attributes}}
    <a class="button--small btn" data-selector="{{selector}}">{{title}}</a>
{{/attributes}}

and a sample output of that is

<a class="button--small btn" data-selector=".news">More News</a>

However, I am trying to execute another jquery function when this button is clicked but regardless of whether I use .click(function() { }); or .bind it doesn't seem to work? Even a console.log doesn't print so I'm not getting into the right conditions.

Here is the script:

function lazyload(selector) {
    $("a[data-selector^='"+selector+"']").bind("click", function(e) {
            e.preventDefault();
            loadNews(selector);
    });
}

$(document).ready(function(){
   lazyload(".news"); // CALL FUNCTION READY FOR USAGE
});

It might be easier to simply make "news" a class rather than a data. Then you could do `$(".news")...` etc. Also `.bind` is deprecated, you should use `.on` instead (same method signature). Lastly, are your `` elements loaded at page load, or later on? If they're later, you need to use the version of `.on` which supports delegated events (see the jQuery docs) http://api.jquery.com/on/ — ADyson, Sep 30 '16 at 14:03

score 2 · Accepted Answer · answered Sep 30 '16 at 14:01

2

For newly created elements you need to delegate the event: see "Direct and delegated events" section.

function lazyload(selector) {
   $(document).on("click", "a[data-selector^='"+selector+"']", function(e) {
        e.preventDefault();
        loadNews(selector);
   });
 }

answered Sep 30 '16 at 14:01

gaetanoM

41,594
6
42
61

1

Brilliant - thanks mate 1 min till I can accept – WebDevDanno Sep 30 '16 at 14:13
You made my day!!!! :) Thanks a lot!!! – Nuno Bentes Jun 06 '17 at 00:02

Click event / bind event not working in jQuery when generating buttons in Mustache JS

1 Answers1