Блог

Главная - Вопросы по программированию - События щелчка Jquery не запускаются после добавления элемента в DOM, несмотря на использование on ()

События щелчка Jquery не запускаются после добавления элемента в DOM, несмотря на использование on ()

#javascript #jquery #html #dom

#javascript #jquery #HTML #dom

Вопрос:

Я думаю, что я, должно быть, упускаю что-то очевидное здесь.

У меня есть функция, привязанная к событию щелчка в классе. Функция добавляет элемент в 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>

Комментарии:

1. можете ли вы настроить скрипку?

2. Ах! Я знал, что это будет что-то очевидное! Спасибо обоим, оба решения работают отлично.

Ответ №1:

Добавляемый вами div простирается полностью от верхней части экрана до его положения, охватывая все элементы над ним.

Добавьте этот стиль css:

 #cdisplay {
    float: left;
}

Ответ №2:

Быстрый ответ, добавьте это в css:

 #cdisplay {
    z-index: -1;
}

Проблема в том, что когда вы добавляете #cdisplay, он затеняет #cboxes, поэтому вы больше не можете нажимать на них.