jquery无法找到每个ID的div元素

Question

Ok, I'm not exactly a js newbie but this is just bizarre.

I have a wordpress here and want to add a comment box, which should load comments per ajax if the box is visible, when the user scrolls down to that box, so I can save performance and don't need to load comments every time someone just requests the page.

To accomplish this, I added the following snippet to my wp single.php post template:

            <?php /** Begin Post Content **/ ?>     

        <?php the_content(); ?>

        <?php wp_link_pages('before=<div class="pagination">'._r('Pages:').'&after=</div><br />'); ?>

        <div id="vbcomments_box" style="display:visible">asd</div>

        <?php print vb_comments_ajax($post); ?>

        <?php /** Begin Tags **/ ?>

the 4th and 5th line is from me, it introduces a div#vbcomments_box with an id and random content for now.

After that, I call a function to inject javascript code into the page (i know this can be fancier, but for development purposes this will stay for now.) :

<script>

(function(){window.setInterval(function() {
    console.log('the element is: ', $('#vbcomments_box'));
    if($('#vbcomments_box').is(':visible')){
        vbc_is_visible();
    }
}, 1000);

// Function / event that will be started and stopped
function vbc_is_visible() {
    alert('HALLO');
    $("#vbcomments_box").html("LOADING...");
}

console.log("Inside script");})();

</script>

This just sets a timer which tests for the selector $('#vbcomments_box').is(':visible')

What happens is, that $('#vbcomments_box') is always null. I tested everything. I changed vbcomments_box to a class, i added div before the #, I tried looking it up per document.getElementById (which is found fortunately, but I can't do anything with it)

So why can't jquery find this simple div element where I'm 10000% sure that it exists in the sourcecode and the js stuff gets called AFTER the div has been placed into the sourcecode?

What am I doing wrong?

console says:

the element is:  null (index):611
Uncaught TypeError: Cannot call method 'is' of null 

Answer 1

Try this:

<?php the_content(); ?>

<?php wp_link_pages('before=<div class="pagination">'._r('Pages:').'&after=</div><br />'); ?>

<div id="vbcomments_box" style="display:visible;">asd</div>

<?php print vb_comments_ajax($post); ?>

<?php /** Begin Tags **/ ?>

......

<script>

(function(){window.setInterval(function() {
    console.log('the element is: ', jQuery('#vbcomments_box'));
    if(jQuery('#vbcomments_box').is(':visible')){
        vbc_is_visible();
    }
}, 1000);

// Function / event that will be started and stopped
function vbc_is_visible() {
    alert('HALLO');
    jQuery("#vbcomments_box").html("LOADING...");
}

console.log("Inside script");})();

</script>

Answer 2

See this answer.

Wordpress loads jQuery in no-conflict mode, so, $ isn't available.

Use jQuery instead of $