Добавление обработчиков событий нажмите рекурсивно

Question

У меня есть элемент #standardBox

#standardBox.click --> replaces itself with #newBox

#newBox.click --> replaces itself with #standardBox

Но эта последняя #standardBox не имеет слушателя событий мыши. Я хочу, чтобы у него был прослушиватель событий щелчка и его впоследствии созданные элементы. Это попадает в рекурсивный цикл, который я не знаю, как обращаться.

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

Спасибо.

HTML

<div id="container"> 
    <div id="standardBox"></div> 
</div> 

CSS

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
#container { 
    position: relative; 
    height: 5em; 
    width: 5em; 
    background: #C5CAE9; 
} 
#standardBox { 
    position: absolute; 
    top: 20%; 
    right: 20%; 
    bottom: 20%; 
    left: 20%; 
    background: #ffffff; 
    cursor: pointer; 
} 
#newBox { 
    height: 3em; 
    width: 3em; 
    background: #000000; 
    cursor: pointer; 
} 

JAVASCRIPT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script> 
$('#standardBox').click(function(){ 
    $('#container').html('<div id="newBox"></div>'); 
    // register event handler for new element created 
    $('#newBox').click(function(){ 
     $('#container').html('<div id="standardBox"></div>'); 
     // but this #standardBox has no click event listener 
    }); 
}); 

http://codepen.io/anon/pen/YPLKLq

Answer 1

Прикрепите обработчик к телу, а не так:

$("body").on("click", "#standardBox", function(){ 
    $('#container').html('<div id="newBox"></div>'); 
}) 
.on("click", "#newBox", function(){ 
    $('#container').html('<div id="standardBox"></div>'); 
}); 

Это заставляет организм прослушивать события, которые происходят из #standardBox и #newBox. Обратите внимание, что переменная this по-прежнему установлена ​​либо в #standardBox, либо в элементе #newBox.

Answer 2

использование нижеследующего кода. динамически созданная доза элемента не срабатывает, используя функцию «щелчок». вам необходимо прикрепить обработчик к документу (корпусу)

$(document).on('click','#standardBox',function(){ 
    $('#container').html('<div id="newBox"></div>'); 
    // register event handler for new element created 
}); 

$(document).on('click','#newBox',function(){ 
     $('#container').html('<div id="standardBox"></div>'); 
    // but this #standardBox has no click event listener 
}); 

Answer 3

Почему вы пишете такой сложный код, чтобы сделать это. Поскольку может быть очень простой код.

Позволяет сказать, что это ваш html.

<div id="container"> 
    <div id="standardBox"></div> 
</div> 

Теперь, чтобы изменить внутренний контейнер.

$(function(){ 
    $('#container div').click(function(){ 
     $(this).attr("id")=="standardBox"?$(this).attr("id","newBox"):$(this).attr("id","standardBox"); 
    }); 
});