JQuery/javascript:DynamicGallery'；s图像可以用作链接，但不能用作按钮。为什么？

我目前正在建设我的网站，我正在努力与我的在线投资组合几个晚上了。我过度搜索互联网，但我不知道如何用语言表达我的问题，并尝试了几种我想到的解决方法

要查看我的问题，请访问以下测试版网站：

我在这里找到的公文包部分添加了一个图库：

我喜欢它的动画和风格，但我想增加一个“第三级”。默认情况下，堆栈将图像分布到网格上。加载的图像包含一个链接，因此您可以单击它们以定向到网站。但是，我想在单击图像时触发一个新元素。考虑一个具有较大图像和旁边信息区域的div。不幸的是，我无法让画廊图像作为按钮使用。我试图分配id来调用jquery函数，但没有识别出点击。今天我发现了一个可能的问题。包含图像的网格似乎总是位于图像的顶部。因此，当我向整个网格区域添加一个函数时（请参见下面的“tp网格”），我可以在图库中单击，它会触发我的图像，只是单个图像不能作为单独的按钮工作：/。我希望有人能给我一个提示。我尝试将代码分为以下几个主要方面：

包含画廊的公文包区域：

<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>    

我在网站上的所有按钮都使用了这样的代码行。语法应该是ok^ ^。如果我没有弄错的话，一旦你上了网站，就可以通过浏览器看到完整的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();
        } );

    } );

$（函数（）{
var$grid=$（“#tp grid”），
$name=$（“#name”），
$close=$（“#close”），
$loader=$（'Loading…'）。insertBefore（$grid），
stapel=$grid.stapel（{
onLoad:function（）{
$loader.remove（）；
},
onBeforeOpen:函数（pileName）{
$name.html（pileName）；
},
onAfterOpen:函数（pileName）{
$close.show（）；
}
} );
$close.on（'click'，function（）{
$close.hide（）；
$name.empty（）；
stapel.closePile（）；
} );
} );

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

这是第一次在这里发布，如果您无法在我的网站上查看源代码，请告诉我您是否需要更多信息。万分感谢

致以最良好的祝愿，

---

Dziga

您需要防止插件试图触发的默认点击行为

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

---

想了解更多关于这是如何工作的信息，请查看。

顺便说一句，画得不错！哇！非常感谢您的快速回复。完全有效！也谢谢你的参考！

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