0

On my site I'm currently using the jquery component "mentionsInput". It works fine, however it doesn't seem to work on newly ajax generated elements. 

$(function () {
    var data = [];

    $(document).on('focus','.mention', function(){

        var id = $(this).attr("data-entity");
        $.ajax({
            type: "GET",
            url: host + '/users/mentions-list/' + id,
            success: function(response) {
                data = response;
            }
        });
    });

    $('.mention').mentionsInput({
        onDataRequest:function (mode, query, callback) {
            var requestData = _.filter(data, function(item){
                return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
            });
            callback.call(this, requestData);
        }
    });

});

The .on focus function works just fine with newly generated elements, but the second function does not.

How could I resolve this issue?

Felix
  • 2,532
  • 5
  • 37
  • 75
  • move $('.mention').mentionsInput inside $(document).on('focus','.mention', function(){ . Why ? Because you need to reapply mentionsInput on the newly generated elements – DinoMyte Mar 15 '18 at 00:22
  • Doesn't work. The second function triggers now, however when I click the mentioned name I want, the first function triggers and cancels the process. – Felix Mar 15 '18 at 00:26
  • Possible duplicate of [How to bind event for dynamically created elements in JQuery](https://stackoverflow.com/questions/47338881/how-to-bind-event-for-dynamically-created-elements-in-jquery) – blurfus Mar 15 '18 at 00:31
  • There isn't really much in that post to help me out @ochi – Felix Mar 15 '18 at 00:39

0 Answers0