Question

我想我必须在这里遗漏一些明显的东西。

我有一个绑定到类上的click事件的函数。该函数在一个位置中向DOM添加一个元素，该位置取决于所单击元素的位置。基本上，如果单击多行框中的框，则会在单击框的行下添加信息显示div（请参阅示例代码）。

然而，我实现它的方式似乎一旦添加了信息显示div，click事件就不再触发添加div之前出现在DOM中的任何元素。在添加的div之后它仍会触发元素。

我已经通过on（）委托了事件处理程序，所以我不确定为什么它不会受到约束。什么dunderheaded明显的东西，我错过了吗？

提前感谢您宝贵的时间。

<!DOCTYPE html>
<html lang="en-gb">
<head>    

    <title>Box page</title>
    <link rel="stylesheet" type="text/css" media="" href="http://www.hud.ac.uk/media/universityofhuddersfield/styleassets/css/bootstrap.css" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script><!-- jquery.1.9.2.js -->    

<style>    

.cbox {
}    

.cbox h2 {
    margin: 5px;
    color: #fff;
}    

.green .squarepushed {
    background-color: #8CC63F;
}    

.pink .squarepushed {
    background-color: #EC008C;
}    

.blue .squarepushed {
    background-color: #00ADEF;
}    

.orange .squarepushed {
    background-color: #F89828;
}    

.squarepusher {
    margin-top: 100%;
}    

.squarepushed {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    border-radius: 5px;
    color: #fff;
}    

</style>    

<script>    

$(document).ready( function() {    

    $('#cboxes').on('click', '.cbox', function() {    

        console.log('Triggered!');    

        $('#cdisplay').remove();     

        var numcols = 6;
        var currpos = $(this).index()+1;
        var currrow = Math.ceil( currpos / numcols );
        var endsquare = currrow * numcols ;
        var html = "showing content for box "+currpos+" after box "+endsquare;
        $(this).parent().children('.cbox:nth-child('+endsquare+')').after("<div class='col-xs-12' id='cdisplay'><p>"+html+"</p></div>");    

    } );    

});    

</script>    

</head>
<body>    

<div class="container">
<div class="row" id="cboxes">    

<div class="cbox pink col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 1</h2>
    </div>
</div>    

<div class="cbox blue col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 2</h2>
    </div>    

</div>    

<div class="cbox blue col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 3</h2>
    </div>    

</div>    

<div class="cbox pink col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 4</h2>
    </div>    

</div>    

<div class="cbox pink col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 5</h2>
    </div>    

</div>    

<div class="cbox orange col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 6</h2>
    </div>    

</div>    

<div class="cbox green col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 7</h2>
    </div>    

</div>    

<div class="cbox orange col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 8</h2>
    </div>    

</div>    

<div class="cbox orange col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 9</h2>
    </div>    

</div>    

<div class="cbox orange col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 10</h2>
    </div>    

</div>    

<div class="cbox orange col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 11</h2>
    </div>    

</div>    

<div class="cbox green col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 12</h2>
    </div>
</div>    


<div class="cbox blue col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 13</h2>
    </div>    

</div>    

<div class="cbox pink col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 14</h2>
    </div>    

</div>    

<div class="cbox orange col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 15</h2>
    </div>    

</div>    

<div class="cbox orange col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 16</h2>
    </div>    

</div>    

<div class="cbox green col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 17</h2>
    </div>    

</div>    

<div class="cbox blue col-xs-2">    

    <div class="squarepusher"></div>
    <div class="squarepushed">
        <h2>Box 18</h2>
    </div>
</div>    



</div>
</div>    

</body>
</html>

Answer 1

您要添加的div从屏幕顶部一直延伸到它的位置，覆盖其上方的所有元素。

添加此css样式：

#cdisplay {
    float: left;
}

Answer 2

快速回答，将其添加到css：

#cdisplay {
    z-index: -1;
}

问题是当你追加#cdisplay时，它会遮挡#cboxes，所以你不能再点击它们了。

在向DOM添加元素后，Jquery单击事件不会触发，尽管使用了on（）

2 个答案: