页面加载后单击基于数据类别的按钮答案

【问题标题】：click on button based on data-category after page load页面加载后单击基于数据类别的按钮
【发布时间】：2017-09-21 21:57:40
【问题描述】：

这是我的菜单：

<div class="portfolio-item-filter" id="work-filter">
  <a class="gdlr-button active" href="#" data-category="All">Work</a>
  <a class="gdlr-button" href="#" data-category="film">Film</a>
  <a class="gdlr-button" href="#" data-category="print">Print</a>
</div>

我试图在页面加载时单击电影按钮，但没有成功。看了几个地方，这是我得到的结果，但是不行

jQuery(document).ready(function() {
   jQuery('a[data-category="film"]')).trigger( "click" );
});

我对@987654323@ 和jQuery 的了解有限，所以我可能在错误的地方或以错误的方式使用了正确的脚本。

你能支持我吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这里有一个解决方案https://jsfiddle.net/hxn7cfhv/

jQuery('a[data-category="film"]').click(function(){
  console.log("Film button clicked");
});

jQuery(document).ready(function() {
  jQuery('a[data-category="film"]').trigger( "click" );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portfolio-item-filter" id="work-filter">
  <a class="gdlr-button active" href="#" data-category="All">Work</a>
  <a class="gdlr-button" href="#" data-category="film">Film</a>
  <a class="gdlr-button" href="#" data-category="print">Print</a>
</div>

问题在于您的代码jQuery('a[data-category="film"]')).trigger( "click" );，它在.trigger 之前有额外的右括号。

希望这对你有帮助。

【讨论】：

真正的问题不是括号（我也看到了）。如果没有对链接的显式点击绑定，它根本无法工作。在没有自定义绑定的情况下尝试它，您会看到它。只需将 url 附加到 href 属性并删除自定义绑定。它不会起作用。

【解决方案2】：

如果单击不起作用，您可以简单地从链接标签中读出 href 属性并手动打开它；）。这是一个应该工作的示例小提琴。我用一个有效的 url 预先填充了你的链接以进行演示。

JS 代码段

jQuery(document).ready(function() {
   $link = jQuery('a[data-category="film"]');
   target = $link.attr("target");
   href = $link.attr("href");
   window.open(href, target);
});

https://jsfiddle.net/1oqLrL1d/3/

但是，如果您想触发绑定到您的链接的点击事件。请确保在调用实际触发器/单击之前绑定此事件。否则它将无法正常工作。此外，您还可以在链接上绑定点击事件并创建自己的功能。只是一些想法。

How to trigger click on page load?

代码更新，目标处理。

【讨论】：

【解决方案3】：

使用 ID 或类

<div class="portfolio-item-filter" id="work-filter">
  <a class="gdlr-button active" href="#" data-category="All">Work</a>
  <a class="gdlr-button filmbtn" href="#" data-category="film">Film</a>
  <a class="gdlr-button" href="#" data-category="print">Print</a>
</div>

jQuery(document).ready(function() {
   jQuery('.filmbtn')).trigger( "click" );
});

【讨论】：