新页面加载后，jQuery点击事件 [英] jQuery click event after new page loads

问题描述

我有一个使用Node / Express / Handlebars的web项目。

我通过handelbars部分呈现了侧面的粘性导航。

单击链接并加载页面时，我希望活动状态更改为单击的元素。我试过 .click（）和 .on（'click'，child，callback）。它在我点击它时起作用，但在DOM重新加载后重置。

谢谢您的帮助。Stackoverflow。

这是我的jQuery：

  // NAVIGATION ACTIVES 
 $（'。stickynav'）。on（'click'，'.platform-nav'，
 function （）{
 $（'。main-hand'）。removeClass（nav-active）; 
 $（'。sticky-hand'）。removeClass（nav-active）; 
 $（this）.addClass（nav-active）; 
 
}）; $'$'$'$'$'$'$'$'$'$'$'''。' （nav-active）; 
 $（'。sticky-hand'）。removeClass（nav-active）; 
 $（this）.addClass（nav-active）; 
}）; $（'。stickynav'）。on（'click'，'.diensten-nav'，
 function（）{
 $（'。main-hand'）。removeClass（ （nav-active）; 
 $（'。sticky-hand'）。removeClass（nav-active）; 
 $（this）.addClass（nav-active）; 
}）; $（'。stickynav'）。on（'click'，'.blog-nav'，
 function（）{
 $（'。main-hand'）。removeClass（ （nav-active）; 
 $（'。sticky-hand'）。removeClass（nav-active）; 
 $（this）.addClass（nav-active）; 
}）; 
  

和HTML（.hbs）：

 < div class =stickynavdata-spy =affix> 
< div class =hands-connector> 
< img src ='/ img / connector-sticky.png'/> 
< / div> 
 
 
< div class =hand-sticky> 
< div class =sticky-hand platform-nav nav-activeid =platform-sticky> 
< a href =/> < img src =/ img / platform-sticky.pngalt =Naar kennisplatform/> 
< p> Kennisplatform< / p>< / a> 
 
< / div> 
< div class =sticky-hand tools-navid =tools-sticky> 
< a href =/ tools> 
< img src =/ img / tools-sticky.pngalt =Naar gratis tools/> 
< p> 
工具
< / p> 
< / a> 
< / div> 
< div class =sticky-hand diensten-navid =diensten-sticky> 
< a href =/ diensten> 
< img src =/ img / diensten-sticky.pngalt =Naar diensten/> 
< p> 
 Diensten 
< / p> 
< / a> 
< / div> 
< div class =sticky-hand blog-navid =blog-sticky> 
< a href =/ blog？page = 1> 
< img src =/ img / blog-sticky.pngalt =Naar blog/> 
< p> 
博客
< / p> 
< / a> 
< / div> 
< / div> 
< / div> 
  

和用于引用的CSS类（禁用链接）：

  .nav-active {
 text-decoration：none; 
颜色：黑色; 
 -webkit-filter：drop-shadow（1px 1px 0 blue）drop-shadow（-1px -1px 0 blue）; 
 -ms-filter：drop-shadow（1px 1px 0 blue）drop-shadow（-1px -1px 0 blue）; 
过滤器：drop-shadow（1px 1px 0 blue）drop-shadow（-1px -1px 0 blue）; 
 pointer-events：none; 
 cursor：default; 
} 
  

解决方案

你试图做的事情是可能的或不可行的。

如果页面重新加载，你将失去任何不以某种方式备份的状态。
因此，您需要某种数据源或会话。

如果您不需要重新加载页面，则可以返回false。在你的点击功能结束时，应该阻止页面重新加载，并给你你正在寻找的类改变。

如果你的点击事件正在改变路线，那么

，我推荐一个脚本，在页面加载完成后运行（在文档准备就绪时）

  $（function（）{你的代码在这里}）
  

检查当前路线并根据路线设置css类。 （而不是基于点击的内容，因为在页面加载时你会失去这些信息，但是你仍然会拥有这条路线。）

  location.href 
  

I've got a web project using Node/Express/Handlebars

I've got a sticky navigation on the side which is rendered through a handelbars partial.

When a link is clicked and the page loads I want the active state to change to the element that was clicked. I've tried both .click() and .on('click', child, callback) . It works when I click it, but it resets after the DOM reloads.

Thank you kindly for your help Stackoverflow.

Here's my jQuery:

//NAVIGATION ACTIVES
$('.stickynav').on('click', '.platform-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");

  });
$('.stickynav').on('click', '.tools-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });
$('.stickynav').on('click', '.diensten-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });
$('.stickynav').on('click', '.blog-nav',
  function() {
    $('.main-hand').removeClass("nav-active");
    $('.sticky-hand').removeClass("nav-active");
    $(this).addClass("nav-active");
  });

And HTML (.hbs) :

<div class="stickynav" data-spy="affix">
  <div class="hands-connector">
        <img src='/img/connector-sticky.png'  />
  </div>


<div class="hands-sticky">
  <div class="sticky-hand platform-nav nav-active" id="platform-sticky">
    <a href="/">        <img src="/img/platform-sticky.png" alt="Naar kennisplatform" />
            <p>Kennisplatform</p></a>

  </div>
  <div class="sticky-hand tools-nav" id="tools-sticky">
    <a href="/tools">
        <img src="/img/tools-sticky.png" alt="Naar gratis tools" />
        <p>
          Tools
        </p>
      </a>
  </div>
  <div class="sticky-hand diensten-nav" id="diensten-sticky">
    <a href="/diensten">
        <img src="/img/diensten-sticky.png" alt="Naar diensten" />
        <p>
          Diensten
        </p>
    </a>
  </div>
  <div class="sticky-hand blog-nav" id="blog-sticky">
    <a href="/blog?page=1">
        <img src="/img/blog-sticky.png" alt="Naar blog" />
      <p>
        Blog
      </p>
    </a>
  </div>
</div>
</div>

and the CSS class for reference (disables the link) :

.nav-active {
  text-decoration:none;
  color:black;
  -webkit-filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  -ms-filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  filter: drop-shadow(1px 1px 0 blue) drop-shadow(-1px -1px 0 blue);
  pointer-events:none;
  cursor:default;
}

解决方案

I'm not sure if what you're trying to do is possible or not..

If the page reloads, you will lose any state that isn't somehow backed up. So you'll need some sort of data source or session.

If you do not need the page to reload, you can "return false;" at the end of your click functions and that should prevent the page reload and give you the class changes that you're looking for.

if your click event is changing the route, i'd recommend a script that runs after the page load is complete (on document ready)

$(function () { your code here }) 

that checks the current route and sets the css classes there based on the route. (instead of based on what was clicked, since you'll lose that information on a page load, but you will still have the route.)

location.href

这篇关于新页面加载后，jQuery点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！