CODEWITHSUNDEEP
javascriptjquerydom
varhawk5
varhawk5

Reputation: 31

How to use jQuery after new objects are injected into DOM?

I am making a Sentence Generator. So far, it can take a list of words. Then it gets data from sentence.yourdictionary.com to take a sentence. I display the first sentence from sentence.yourdictionary.com using $("ul.example>li").first().Then it is put into a paragraph <p id="sents">.

So if you entered in the words yo and nose your output would be 

<p id="sents"><li id="yo"><strong>Yo</strong> ' money
back a hund'd times, de preacher says!</li><li id="nose">I will no longer be caught with a
bleeding <strong>nose</strong>, heart palpatations, week long benders or hurting myself in any major way.</li></p>

I want a function to be called when you hover over the new list items. 

$(document).ready( function() {
    $("li").hover( function () {
        $(this).append("<span>Testing</span>");
        var id = $(this).attr("id");
        console.log(id);
    }, function () {
        $(this).find("span:last").remove();
    });
});

This doesnt work after the new list items are injected into the DOM. I tried adding an event listener for mousemove, but then when you hover over it the word "test" shows up a bunch of times! How can I make it happen after the new list items are injected?

Here is a jfiddle if you want some clarification: http://jsfiddle.net/varhawk5/cNKyx/1/

Thank you so much. Sorry I'm just learning javascript!

EDIT

To fix this issue, I used the .on() function as the comments suggested. There is no "hover" event though, so I think this is the only way.

$("body").on("mouseenter", "li#topWord", function() {
        var word = $(this).data("word");
        var sents = sentences[word]
        $(this).html("<div class='restOfSents' data-word='" + word +"'></div>");
        for(var i=1; i<sentences[word].length; i++) {
            $(".restOfSents").append($(sentences[word][i]));
        }
    console.log(sents);
});

$("body").on("mouseleave", "li", function() {
    // Remove the new div
});

Upvotes: 0

Views: 185

Answers (3)

James Donnelly
James Donnelly

Reputation: 128786

You should make use of .on() rather than .hover():

$('li').on('mouseenter', function() { ... })

Also you shouldn't use IDs for this. Make use of data-* attributes instead. Otherwise your code will break when a user enters the same word twice (as IDs are unique).

var id = $(this).attr('data-example');

Upvotes: 1

shellster
shellster

Reputation: 1131

You're right! The reason for this, is that $(document).ready() only gets called on page load. You can either manually add a new event hook to each new element as you add it, or take advantage of jQuery's "on" functionality which will automatically detect new dom elements which match your criteria.

Upvotes: 1

Bhadra
Bhadra

Reputation: 2104

$(document).ready( function() {
$(document).on('hover','li', function () {
    $(this).append("<span>Testing</span>");
    var id = $(this).attr("id");
    console.log(id);
}, function () {
    $(this).find("span:last").remove();
});
});

Upvotes: 1

Related Questions