單擊javascript中的錨標記可在控制台中使用

Question

我有幾個像這樣的錨標簽

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

頁面加載后，應觸發所有ID為“ GTid_3 ”的錨標記（點擊事件）。 我寫了一個jQuery代碼

<script>

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

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

如果我包含在<script></script>標記中，則此方法不起作用。 但是，如果我將其粘貼到控制台 （開發人員選項）中，則可以正常工作。 這讓我生氣。 我不明白為什么頁面中沒有它。 在控制台中工作時是否會調用任何事件？

Answer 1

似乎在創建元素之前正在運行代碼。 您也可以使用console.log輕松調試它，如下所示：

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

您沒有提到<script>確切位置，但是如果相同的代碼在控制台中完全可以正常工作，那么它也需要實際起作用。

Answer 2

如果您的ID是動態添加的，請嘗試使用$(document).find('.pointer-level').each(function() 。要觸發點擊，請使用$(this).trigger('click')

堆棧片段

 $(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>