Jquery onClick未触发

我正在使用jQuery项滑块创建滑动导航

以下是我的代码片段：

    <div class="boxes-wrapper">
        <div id="Apps_Google" class="boxes active">
            <? 
            echo "<div class='box card_grid_static' url='http://mail.google.com'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Mail</div></div></div>";
            echo "<div class='box card_grid_static' url='http://drive.google.com'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Drive</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Calendar</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Sites</div></div></div>";
            ?>
        </div>
        <div id="Apps_Classroom" class="boxes">
            <? 

            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Classroom</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Schoology</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>ProgressBook</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>DASL</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>EdInsight</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Behavior Report</div></div></div>";                   
            ?>
        </div>
        <div id="Apps_Instruction" class="boxes">
            <? 
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Instruction</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Technology</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Learn</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>PD Express</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>eTPES</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>School Works</div></div></div>"; 
            ?>
        </div>
        <div id="Apps_Support" class="boxes">
            <?
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>VarTek</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Aesop</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>Naviance</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>AIMsweb</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>IEP Anywhere</div></div></div>";
            echo "<div class='box card_grid_static'><div style='height: 100px; background: url(http://beta.hcsdoh.org/images/cover.jpg) no-repeat; background-size: cover;'></div><hr><div class='card_padding_footer_grid'><div class='gridtext'>AR/STAR</div></div></div>";                   
            ?>
        </div>
        <div class="clear"></div>
    </div>

您应该使用documentready

$(document).ready(function(){
     $( ".box" ).on( "click", function(){
        notify();
     });
});

我猜滑块脚本在某种程度上改变了.box div。尝试一下：

$(document).on('click', '.box', notify);


函数notify（）{
警报（“点击”）；
}
$（窗口）。在（“单击”、“.box”上，函数（）{
通知（）；
});
感谢罗纳德·01990的创意。我通过在每次单击后调整z索引解决了这个问题

$( '#google' ).click( function () {   
    $( '#Apps_Google' ).addClass( 'zjump' );
    $( '#Apps_Classroom' ).removeClass( 'zjump' );
    $( '#Apps_Instruction' ).removeClass( 'zjump' ); 
    $( '#Apps_Support' ).removeClass( 'zjump' ); 
});


$( '#classroom' ).click( function () {   
    $( '#Apps_Classroom' ).addClass( 'zjump' ); 
    $( '#Apps_Google' ).removeClass( 'zjump' );
    $( '#Apps_Instruction' ).removeClass( 'zjump' ); 
    $( '#Apps_Support' ).removeClass( 'zjump' ); 
});


$( '#instruction' ).click( function () {   
    $( '#Apps_Instruction' ).addClass( 'zjump' );  
    $( '#Apps_Google' ).removeClass( 'zjump' );
    $( '#Apps_Classroom' ).removeClass( 'zjump' ); 
    $( '#Apps_Support' ).removeClass( 'zjump' ); 
});

$( '#support' ).click( function () {   
    $( '#Apps_Support' ).addClass( 'zjump' ); 
    $( '#Apps_Classroom' ).removeClass( 'zjump' );
    $( '#Apps_Instruction' ).removeClass( 'zjump' ); 
    $( '#Apps_Google' ).removeClass( 'zjump' ); 
}); 

OP询问有关
.box
事件的信息-他们表示已经可以触发
.box
事件。正确。盒子会着火，但不会。盒子。我正在尝试启动.box。如果它不起作用，滑块脚本可能会删除.box类。您的JSFIDLE可以工作，但这是因为每次启动时，滑块脚本都会替换.box。所以它总是在一个组上工作。然后你应该找到一个在滑块脚本完成它的工作后仍然可用的类。使用Chrome或FireFox（例如）开发人员工具栏进行尝试……唯一可用的类是.box及以上。除了最后一个.box分区外，.box中的所有内容都消失了。请参见测试页面：它没有消失，我可以看到最后一个Apps\u支持在物理上位于其他应用之上，即使它的内容消失了。然后剩下的幻灯片就在下面，这就是为什么你不能点击它们。也许你可以找到一个解决方案，当幻灯片在屏幕上不可见时，幻灯片会被隐藏（
display:none；
），我已经更新了我的代码片段。在进一步的调查中，我意识到。盒子在最后一节课上确实会着火，但在之前的任何一节课上都会着火。它必须被覆盖。有什么解决办法吗？请为此案例创建一个测试页面，以便检查。也许可以使用滑块在您的域上创建一个页面？这是一个测试页面……正如您所看到的……它只在您单击“支持”然后单击一个box div时触发。
$(document).on('click', '.box', notify);

<script>
function notify() {
  alert( "clicked" );
}
    $(window).on( "click", ".boxes", function(){
        notify();
    });
</script>

$( '#google' ).click( function () {   
    $( '#Apps_Google' ).addClass( 'zjump' );
    $( '#Apps_Classroom' ).removeClass( 'zjump' );
    $( '#Apps_Instruction' ).removeClass( 'zjump' ); 
    $( '#Apps_Support' ).removeClass( 'zjump' ); 
});


$( '#classroom' ).click( function () {   
    $( '#Apps_Classroom' ).addClass( 'zjump' ); 
    $( '#Apps_Google' ).removeClass( 'zjump' );
    $( '#Apps_Instruction' ).removeClass( 'zjump' ); 
    $( '#Apps_Support' ).removeClass( 'zjump' ); 
});


$( '#instruction' ).click( function () {   
    $( '#Apps_Instruction' ).addClass( 'zjump' );  
    $( '#Apps_Google' ).removeClass( 'zjump' );
    $( '#Apps_Classroom' ).removeClass( 'zjump' ); 
    $( '#Apps_Support' ).removeClass( 'zjump' ); 
});

$( '#support' ).click( function () {   
    $( '#Apps_Support' ).addClass( 'zjump' ); 
    $( '#Apps_Classroom' ).removeClass( 'zjump' );
    $( '#Apps_Instruction' ).removeClass( 'zjump' ); 
    $( '#Apps_Google' ).removeClass( 'zjump' ); 
});