javascript - JQuery/javascript : Dynamic gallery's images can be used as links but not as buttons. 为什么？

Question

我目前正在构建我的网站，并且我已经好几个晚上都在为我的在线作品集苦苦挣扎。我过度搜索了互联网，但我不知道如何用语言表达我的问题，并尝试了我想到的几种解决方法。

要查看我的问题，请访问此处的网站测试版:http://dzisign.de/jquerytest/fade.html

我在此处找到的作品集部分添加了一个画廊:http://tympanus.net/Development/Stapel/

我喜欢它的动画和风格，但我想添加“第三层”。默认情况下，堆栈将图像分布到网格上。加载的图像包含一个链接，因此您可以单击它们来定向到网站。但相反，我想在单击图像时触发一个新元素。考虑一个带有较大图像和旁边有信息区域的 div。不幸的是，我无法将图库图像用作按钮。我尝试分配 id 来调用 jquery 函数，但没有识别到​​点击。今天我发现了一个可能的问题。包含图像的网格似乎总是位于图像之上。因此，当我向整个网格区域添加功能时(请参阅下面的“tp-grid”)，我可以在图库内单击并触发我的图像，只有单个图像不能用作单独的按钮:/。我希望有人给我提示。我尝试将代码分解为主要区域:

包含画廊的作品集区域:

<div id="pf-content" >

        <div class="container" style="position:absolute; z-index:10;">

            <section class="main">

                <div class="wrapper">

                    <div class="topbar">
                        <span id="close" class="back">&larr;</span>
                        <h1 style="color:#999">PORTFOLIO</h1><h2 id="name"></h2>
                    </div>

                    <ul id="tp-grid" class="tp-grid">

                        <!-- Matte Paintings -->
                        <li id="monja" data-pile="MATTE PAINTING">                             
                                <span class="tp-info"><span >Monjacity</span></span>
                                <img src="images/1/monjacity.jpg" /> 
                        </li>

                    </ul>

                </div>

            <div id="monja-large" style="display:none;z-index:11000;">
        <img src="../clients/VFX_DavidLuongWS/highlife_in_monjacity_v16_1k.jpg" width="1100" height="618" />
            </div>

            </section>

        </div>

    </div>    

基本上，我想通过单击标识为“monja”的图库图像来触发 id="monja-large"的 div。因此我尝试使用这个:

        $( "#monja").click(function() {
        $( "#monja-large" ).toggle( selectedEffect, options, contentFade );
        return false;
    }); 

我对网站上的所有按钮都使用了这样的代码行。语法应该没问题^_^。如果我没记错的话，一旦您进入网站，就可以通过浏览器看到完整的 html 代码。我只是想让这里更干净一点，不要变得太困惑。您将看到该功能没有被触发。这是调用 jquery Stapel.js 插件中函数的部分。不确定这是否有用:

        $(function() {

        var $grid = $( '#tp-grid' ),
            $name = $( '#name' ),
            $close = $( '#close' ),
            $loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>' ).insertBefore( $grid ),
            stapel = $grid.stapel( {
                onLoad : function() {
                    $loader.remove();
                },
                onBeforeOpen : function( pileName ) {
                    $name.html( pileName );
                },
                onAfterOpen : function( pileName ) {
                    $close.show();
                }
            } );

        $close.on( 'click', function() {
            $close.hide();
            $name.empty();
            stapel.closePile();
        } );

    } );

长话短说:您知道如何访问单独的图库图像并通过单击它们来调用函数吗？我还拼命尝试将 tp-grid 向后推，并将图像拉到前面，使它们可以作为按钮点击......但没有成功。

这是第一次在这里发帖，所以如果您需要更多信息，请告诉我，以免您无法在我的网站上查看源代码。谢谢您一千次!

最诚挚的问候，吉加

Answer 1

您需要阻止插件尝试触发的默认点击行为。

$("#monja").click(function(e) {
    e.preventDefault();
    alert('it works');
});

有关其工作原理的更多信息，请查看 Event Bubbling .