Jquery plugin how to implement .live or .on so it works with new elements

Question

I have an HTML page that uses jQuery and also have an external plugin tooltipster.

In order to intialize the plugin I have to do this:

 $(document).ready(function() {
    $('.tooltip').tooltipster();
});

The HTML is very simple you just have to set the class to "tootlip":

'<span class="tooltip" title="This is my spans tooltip message!">Some other text</span>'

This works great for static elements in the DOM.

The problem comes for new elements added after the DOM is created. This is similar to jQuery when using .on() or .live() for elements created after.

So If I have:

 $('#newelement').click(function(e) {

                    $('#elements').html('<span class="tooltip" title="This is my spans tooltip message!">New element</span>');

                });

Any clue on how to make this work? Can I use .on() in a way that it works for static and dynamic elements?

Have you read http://iamceege.github.io/tooltipster/#delegation ? might answer your question. — Louis Ameline, Jul 26 '16 at 12:47

score 2 · Answer 1 · answered Jul 26 '16 at 02:04

2

Yep, for newly created elements you're better of using:

$(document).on("click", "#newelement", function(e) {

                $('#elements').html('<span class="tooltip" title="This is my spans tooltip message!">New element</span>');

            });

answered Jul 26 '16 at 02:04

John Detlefs

952
8
16

That's not the question. Its about having the tooltip working when new elements are added. – VAAA Jul 26 '16 at 02:15
Ahh okay, in that case look at http://jsfiddle.net/carlesso/4Qjcr/ and http://stackoverflow.com/questions/9958825/how-do-i-bind-twitter-bootstrap-tooltips-to-dynamically-created-elements This works with Bootstrap tooltips, and I'm assuming it should work with tooltipster as well, although I'm not familiar with the plugin. – John Detlefs Jul 26 '16 at 05:14

score 0 · Answer 2 · answered Jul 26 '16 at 07:56

0

Best solutions will be to rebind all (or if you're ambitious - only new created) tooltip element right after you create them. For example right after ajax complete you should refresh all tooltips.

answered Jul 26 '16 at 07:56

vonsko

387
4
10

Jote · Answer 3 · 2016-07-26T10:57:26.713

Create new function and call that function in the .on event

//Here call the .on to    
$("#anotherElement").on('click', function(){
     $('.tooltip').tooltipster();
     newFunction();
});

//Call the function to show title
function newFunction(){
     $('#newelement'). click(function(e){
           $('#elements').h tml('<span class="tooltip" title="This is my spans tooltip message!">New element</span>');
     });
}

Jquery plugin how to implement .live or .on so it works with new elements

3 Answers3