单击javascript中的锚标记可在控制台中使用

Question

I have few anchor tag like following

<a href="#" id="anchor tag id" class="pointer-level">Button</a>

After page loads, the all anchor tag which has id of " GTid_3 " should be triggered (click event). I wrote a jquery code

<script>

    $(document).ready(function(){
    })

    $('.pointer-level').each(function(){    
        if($(this).attr("id")=="GTid_3")    
            $(this).click()
    })
</script>

This does not work if I included within <script></script> tag. But if I paste it in console (developer option), its working fine. This makes me mad. I couldnot understand why it does not when included in the page. Is there any event called when we work in console?

Answer 1

It seems that you're running your code before the elements are being created. You can also easily debug it with console.log s, like so:

$(document).ready(function(){
    $('.pointer-level').each(function(){    
         console.log('.pointer-level found');
        if($(this).attr("id")=="GTid_3") {
            console.log('#GTid3 found!');
            $(this).click()
        }
    })
})

You didn't mention where exactly you are putting that <script> , but if the same code exactly works through the console, it also needs to work in action.

Answer 2

Try to use $(document).find('.pointer-level').each(function() if your ids adding dynamically. And for triggering click use $(this).trigger('click')

Stack Snippet

 $(document).ready(function() { $(document).find('.pointer-level').each(function() { if ($(this).attr("id") == "GTid_3") $(this).trigger('click'); }); }) $(document).on('click', '#GTid_3', function() { console.log('clicked '+$(this).text()); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="pointer-level" id="GTid_3">1</a> <a class="pointer-level">2</a> <a class="pointer-level" id="GTid_3">3</a> <a class="pointer-level">4</a> <a class="pointer-level" id="GTid_3">5</a>