Question

在我的文档中，我有一个导航栏：

<div data-role="navbar">
    <ul>
       <li><a href="#allfreebies" data-ajax="false" class="right-link-icon" id="first-link-to-select">All freebies</a></li>
       <li><a href="#favorite" data-ajax="false" class="left-link-icon">Favorite Freebies</a></li>
         </ul>
</div><!--navbar-->

每个链接，当点击时，有一个很好的CSS应用（蓝色边框和白色背景颜色）。

现在我试图在窗口加载上以编程方式触发click事件：

window.onload = function(){
  $("#first-link-to-select").click();
}

我的文档加载完毕后，我注意到蓝色边框正在应用于链接，而不是白色背景颜色。这是错误的事件吗？我错过了什么吗？

Answer 1

首先，我假设你正在使用jQuery并在你的项目中加载了jQuery。第二，windows.load在JavaScript中使用很多，而不是在jQuery中使用。第三，我认为你应该在下面的点击中定义一个函数，并在你的＃first-link-to-select中做一些事情：

jQuery(document).ready(function($) {
$("#first-link-to-select").click(function($) {
        //Your code
    });
});

Answer 2

您应该使用jQuery Mobile Page Events而不是window onload。请参阅Omar的文章：http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/

对于你的，你可以使用pagecreate或pagebeforeshow，如果你总是希望导航到页面时激活相同的链接：

$(document).on("pagecreate", "#pageid", function(){
    $("#first-link-to-select").click();
});

或

$(document).on("pagebeforeshow", "#pageid", function(){
    $("#first-link-to-select").click();
});

点击事件不会更改所点击锚点的CSS

2 个答案: