使用jQuery修改文本以在DOM中动态添加元素

Question

I have a page http://www.projectdemocracy.in/ where some elements are dynamically added (example - CSS class ".fyre-comment-count" showing "X Comment").

I wanted to modify the text once page is loaded.

I was able to change the text using console of jQuery

$(".fyre-comment-count").html($(".fyre-comment-count").text().split(" ")[0]+" Conversations");

When I type the same in my page, it doesn't work.

I also tried $(document).ready(function(){}); but no luck (same with document.ajaxSuccess).

Similarly, document.on would be working only with 'click' events but I want it to be done by default.

$(document).on('click', '.fyre-comment-article', function() {
     //Code
    });

Does it have any 'load' type event in document.on?

What should I do to accomplish this?

Thanks,

Answer 1

I analyzed your web page and saw the following code:

var articleId = fyre.conv.load.makeArticleId(null);
fyre.conv.load({}, [{
    el: 'livefyre-comments',
    network: "livefyre.com",
    siteId: "351251",
    articleId: articleId,
    signed: false,
    collectionMeta: {
        articleId: articleId,
        url:  "http://projectdemocracy.in",//fyre.conv.load.makeCollectionUrl(),
    }
}], function() {});

It seems like the 3rd argument of fyre.conv.load method is a callback function that will be executed when all elements are generated.

So put your code inside this function. It will be like this:

...
}], function() {
    console.log('callback');
    $(".fyre-comment-count").html($(".fyre-comment-count").text().split(" ")[0]+" Conversations");
});

Hope this helps!

EDIT

If it still doesn't work it may be because livefyre runs this callback before DOM elements are being created. The workaround is to put $(".fyre-comment-count").html(...); inside setTimeout with minimal delay:

...
}], function() {
    setTimeout(function() {
        $(".fyre-comment-count").html($(".fyre-comment-count").text().split(" ")[0]+" Conversations");
    }, 10);    //minimal delay. wait till livefyre generates all needed elements
});

EDIT 2

This is another variant how to make it work:

...
}], function(widget) {
  widget.on('commentCountUpdated', function() {
    setTimeout(function() {
      $(".fyre-comment-count").html($(".fyre-comment-count").text().split(" ")[0]+" Conversations");
    }, 10);
  });
});

This widget has a commentCountUpdated event, so you have to subscribe on it, and every time the comments number is changing, your callback will be executed

By the way, commentCountUpdated callback recieves a single argument - the number of comments, so you can rewrite your code as follows:

}], function(widget) {
  widget.on('commentCountUpdated', function(commentsNum) {
    setTimeout(function() {
      $(".fyre-comment-count").html(commentsNum + " Conversations");
    }, 10);
  });
});

Answer 2

jQuery有一个on load事件，如果这是您要查找的内容：

$(window).load(function(){ ... });