如何触发JQuery选项卡元素的click事件

Question

I have an issue with triggering the click event of one of the elements, i added to my Jquery tab. 我在添加到“ Jquery”选项卡中时触发了元素之一的click事件时遇到问题。 As you know, when one of the links in a Jquery tab is clicked, it changes the content of a specified div to the contents of the div with an id specified in the '<a> </a>' of one of the Jquery tab elements (in this case the one that has just been clicked).. 如您所知，当单击“ Jquery”选项卡中的链接之一时，它将指定div的内容更改为具有在Jquery之一的'<a> </a>'中指定的ID的div的内容。标签元素（在本例中为刚刚单击的元素）。

What I want to do is trigger the click event on this element (ie the Jquery tab group element that has just been clicked) when i click another element in my document (ie the element with the id #viewClassesNavBtn ). 我想做的是，当我单击文档中的另一个元素（即ID为#viewClassesNavBtn的元素）时，触发此元素的click事件（即刚刚被单击的Jquery选项卡组元素）。

-------This the call back function code snippet ------ -------这是回调函数代码段------

$(document).ready(function(){

          $("#viewClassesNavBtn").click(function(){
            <!--  $("#dasCBtn").click();-->

            document.getElementById('dasCBtn').click();
              });
});

------This is the jquery tab ui section------ ------这是jquery标签的ui部分------

<ul id="tabs_ul" style="background-color:transparent; border:none;">
<li class="dashBBtn" id="dasBtn"><a href="#borderArmourSummary">Dash   Board</a></li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasCBtn"><a href="#divClasses">Classes</a></li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasPBtn"><a href="#divProfiles">Profile</a></li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasBStn"><a href="#divSettings"> Settings</a></li> 
                </ul>

When I click the element with id #viewClassNavBtn , I expect it to simulate the tab switching event of the JQuery UI but it doesn't. 当我单击ID为#viewClassNavBtn的元素时，我希望它模拟JQuery UI的选项卡切换事件，但事实并非如此。 I get the feeling it is not possible, but I am inexperienced with JQuery UI tabs and stuff, so if it is possible, please help. 我感觉这是不可能的，但是我对JQuery UI选项卡和其他内容没有经验，所以如果可能，请帮助。

Answer 1

jQuery UI is not attaching the click event to the li items, it's attaching it to the link. jQuery UI并未将click事件附加到li项目，而是将其附加到链接。 Simply move the id tags onto the link and problem solved. 只需将id标签移动到链接上即可解决问题。 Included a function to simulate a mouse click instead of relying on the technically obsolete .click() method (which doesn't seem to show any signs of going away) 包括一个模拟鼠标单击的功能，而不是依靠技术上过时的.click()方法（该方法似乎没有任何消失的迹象）

 function clickTab(tab) { let click = new MouseEvent('click', { bubbles: true, cancelable: true, synthetic: true, view: window }); tab.dispatchEvent(click); } $( function() { $( "#tabs" ).tabs(); $(".navBtn").click(function() { let tab = document.getElementById(this.dataset.for); if (document.getElementById("simulate").checked) { clickTab(tab); } else { tab.click(); } }); });

 <head> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="tabs"> <ul> <li class="dashBBtn"><a id="dasCBtn" href="#tabs-1">Nunc tincidunt</a></li> <li class="dashBBtn"><a id="dasPBtn" href="#tabs-2">Proin dolor</a></li> <li class="dashBBtn"><a id="dasBStn" href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Stuff in the C tab</p> </div> <div id="tabs-2"> <p>Stuff in the P tab</p> </div> <div id="tabs-3"> <p>Stuff in the S tab</p> </div> </div> <div> <button class="navBtn" type="button" data-for="dasCBtn">C</button> <button class="navBtn" type="button" data-for="dasPBtn">P</button> <button class="navBtn" type="button" data-for="dasBStn">S</button> <input id="simulate" type="checkbox" checked> </div> </body>

如何触发JQuery选项卡元素的click事件

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-07-13 20:58:34

如何触发JQuery选项卡元素的click事件

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-07-13 20:58:34

解决方案1
0 已采纳 2018-07-13 20:58:34