Как реализовать отклик элемента «внутри» другого элемента с таким же селектором?

Question

[Дмитрий Шалимов]

Есть блок #block-editor, этот блок и все находящихся в нем блоки (не только прямые потомки) должны подсвечиваться по клику, а в дальнейшем по клику на блок #add должно происходить добавление блока в активный.
Проблема заключается в том, что по клику он распознает только родительский блок.

$(document).ready(function(){
    $("#block-editor div").click(function(){
        $(".active").removeClass("active");
        $(this).toggleClass("active");
    });
    $("#add").click(function(){
        $(".active").append("<div class='col-xs-1'>-</div>")
    })
});

<div class="container-fluid">
        <div id="block-editor" class="col-xs-10 active">
            <div id="1" class="col-xs-3 smt-block">1</div>
            <div id="2" class="col-xs-3 smt-block">2</div>
            <div id="3" class="col-xs-3 smt-block">3</div>
            <div id="4" class="col-xs-3 smt-block">4</div>
        </div>
        <div class="col-xs-2">right</div>
    </div>
    <div class="container">
        <div class="col-xs-4" id="add">add</div>
        <div class="col-xs-4" id="del">del</div>
        <div class="col-xs-4" id="opt">option</div>
    </div>

Answer 1

[Stalker_RED]

Во-первых, следует повесить прослушку кликов на #block-editor, т.к. сейчас у вас ф-ция click будет работать только на уже существующих элементах, и не будет работать на свежесозданных.

Во вторых, нужно прерывать всплытие клика, т.к. сперва событие срабатывает на том элементе куда вы кликнули, потом на его родителе и всплывает всё выше и выше. Тк. происходит всё это очень быстро, видите вы только результат самого верхнего срабатывания.

https://jsfiddle.net/v5k6q8p3/

Comments

[Дмитрий Шалимов]

Ссылка не отрабатывает

[Stalker_RED]

Дмитрий Шалимов: Работает и в хроме и в фаерфоксе. Проверяйте свой браузер и/или интернет.
i.imgur.com/OvoIyqE.png

[Дмитрий Шалимов]

Только при последнем запуске код подгрузился. Большое спасибо, все работает!