儘管使用on（）

Jquery單擊事件後沒有觸發將元素添加到DOM後，我想我必須在這裏丟失一些明顯的東西。儘管使用on（）

我有一個函數綁定到類的點擊事件。該函數將元素添加到DOM中的某個位置，該位置取決於所單擊的元素的位置。基本上，如果您單擊幾行框中的一個框，則會在單擊框的行下添加信息顯示div（請參閱示例代碼）。

但是，我已經實現了這種方式似乎一旦添加了信息顯示div，點擊事件不再觸發DOM中出現在添加的div之前的任何元素。它仍然會在添加div之後的元素上觸發。

我已經通過on（）委派了事件處理函數，所以我不確定它爲什麼不受約束。請問我錯過了什麼明顯的東西？

在此先感謝您寶貴的時間。

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

來源

2014-07-03 Jonah

你可以得到一個小提琴嗎？ –

啊！我知道這件事很明顯！謝謝你，兩種解決方案都是一種享受。 – Jonah

您添加的div從屏幕頂部一直延伸到它的位置，覆蓋它上面的所有元素。

添加這個CSS樣式：

#cdisplay { 
    float: left; 
}

來源

2014-07-03 10:26:41

快速的答案，這個加入CSS：

#cdisplay { 
    z-index: -1; 
}

問題是，當你追加#cdisplay，它讓你無法點擊掩蓋了#cboxes在他們身上了。

來源

2014-07-03 10:27:27 teddy

儘管使用on（）

回答

相關問題