Как убедиться, что я могу нажать на элемент с наибольшим z-индексом?

Question

В этой скрипке Я пытаюсь щелкнуть по элементу <div> с самым высоким значением z-index, но по какой-то причине при щелчке всегда выбирается контейнер на заднем плане game_board.

Я пытаюсь настроить его таким образом, чтобы при нажатии на серую плитку я добавлял новую зеленую плитку active. Когда я нажимаю на новую активную плитку, я хочу иметь возможность изменять ее атрибуты и стиль, но я не могу получить этот щелчок, чтобы перейти к активной плитке.

Меня действительно смущает, почему z-index не работает, когда я добавляю новый <div>. Новый <div> имеет класс active, который по умолчанию равен z-index: 10, что должно означать, что это передний <div> ... Проверка в Chrome путем проверки всех значений z-index как я и ожидал, все же он не работает, как ожидалось.

Буду признателен за любую конструктивную критику этого примера.

Answer 1

Вы добавляете новый элемент в game_board, но этот $("div").click(function() применим только к элементу, созданному при загрузке страницы, поэтому, если вы хотите работать click методом в реальном времени, вы должны использовать метод on.

Попробуйте это: http://jsfiddle.net/fxmjbhdw/31/

Answer 2

вам не нужно использовать .on для ваших динамически создаваемых div?

 $("#game_board").on('click', 'div', function() {

http://jsfiddle.net/enf4s0za/1/