Weird bug where links don't work in jquery 

2019-02-25 08:23发布

站内问答 / jQuery
659 3 2

I'm new here - searched everywhere for an answer and can't find one.

I'm using this great tabs+accordion plugin from Codecanyon, but links I am trying to put in the content areas aren't working.

The live site I'm trying to fix is here - http://lrg-international.com/site/ - you'll notice the 'Find out more' buttons in the tabbed area are not clicking through. They can be hovered but clicking them does nothing.

Can anyone tell me why all links after "Link 1" within the 'responsive' tab on this test page aren't clickable/hoverable? Seems to be related to block level elements but I could be totally on the wrong track.

I've asked the developer about this, as it's a paid for plugin, but he hasn't replied. Can anyone help?

3条回答
甜甜的少女心
2楼-- · 2019-02-25 08:24

In your downloadable example, the problem seems to be that the elements move "under" the currently displayed content, but still prevent interaction in the area over the embedded things.

On the "official" demo page, the problem can be noticed as well, but they cleverly formatted the first tab so it isn't getting overlepped from the image under it.

EDIT: Testing the live website I found that changing the .js .tabs > section selector's visibility: hidden; to display: none; AND changing .tabs > section[aria-expanded="true"]selector's visibility: visible; to display: block; solved the problem. You could try that. It does seem like that the 'bubbling' issue may come into play, so try both this and the other answer together.

查看更多
0人赞 添加讨论(0) 举报
We Are One
3楼-- · 2019-02-25 08:32

After much appreciated help from David and Beetroot, exploring various avenues, it turned out to be a conflict with a jquery-ui 'tabs' script. The developer told me to remove this:

jQuery(document).ready(function(){ 
jQuery(function() { 
jQuery(".tabs").tabs(".panes > div"); 
}); 


});

from custom.js

Guess plugins need to come up with more unique names for their elements!

Thanks everyone.

查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
4楼-- · 2019-02-25 08:42

If it's a bubbling issue, then the following script, at the end of the document's <head> may cure it.

<script>
$(window).on('load', function() {
    $(".buttonLRG").on('click', function(e){
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        location.href = $(this).attr('href');
    });
});
</script>

or, possibly

<script>
$(window).on('load', function() {
    $("div.tabs").on('click', ".buttonLRG", function(e){
        e.preventDefault();
        location.href = $(this).attr('href');
    });
});
</script>

or :

<script>
$(function() {
    $(document).on('click', ".buttonLRG", function(e) {
        e.preventDefault();
        location.href = $(this).attr('href');
    });
});
</script>

or :

<script>
$(function() {
    $(document).on('click', 'section[role="tabpanel"]', function(e) {
        alert("at least we're handling the click");
        e.preventDefault();
        var $button = $(".buttonLRG").filter(":visible");
        location.href = $button.attr('href');
    });
});
</script>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)