Изменение содержимого div с помощью jQuery

Question

Родительский div + 3 div внутри. Есть ссылка в одном из дочерних div, при щелчке она изменяет содержимое родителя и показывает другую ссылку в новом контенте, которая должна изменить содержимое родителя обратно к оригиналу. «Возвращение» ничего не работает.

HTML:

<div id="parent"> 
    <div class="onCenterSmall"> 
    <a id="valueForMoney" href="javascript:: void(0)">Read more</a> 
    </div> 
    <div class="onCenterSmall"> 
    </div> 
    <div class="onCenterSmall"> 
    </div> 
</div> 

JS:

$(document).ready(function() { 
      $("#valueForMoney").click(function (e) { 
       e.preventDefault(); 
       $("#mediaWindow").html('<div class="onCenterBig"><div id="backy"><a id="backLink" href="javascript:: void(0)">Go back</a></div></div><div class="onCenterSmall"></div>'); 
      }); 
     }); 

     $(document).ready(function() { 
      $("#backLink").click(function (e) { 
       e.preventDefault(); 
       $("#mediaWindow").html('<div class="onCenterSmall"></div><div class="onCenterSmall"></div><div class="onCenterSmall"></div>'); 
      }); 
     }); 

Answer 1

Элемент динамически добавляется, так что вам нужно делегированного обработчик события:

$(document).ready(function() { 
    $('#mediaWindow').on('click', '#valueForMoney', function (e) { 
     e.preventDefault(); 
     $("#mediaWindow").html('<div class="onCenterBig"><div id="backy"><a id="backLink" href="javascript:: void(0)">Go back</a></div></div><div class="onCenterSmall"></div>'); 
    }); 

    $('#mediaWindow').on('click', '#backLink', function (e) { 
     e.preventDefault(); 
     $("#mediaWindow").html('<div class="onCenterSmall"></div><div class="onCenterSmall"></div><div class="onCenterSmall"></div>'); 
    }); 
}); 

Answer 2

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

$(document).ready(function() { 
    $("#mediaWindow").on('click', '#valueForMoney', function (e) { 
     e.preventDefault(); 
     $("#mediaWindow").html('<div class="onCenterBig"><div id="backy"><a id="backLink" href="javascript:: void(0)">Go back</a></div></div><div class="onCenterSmall"></div>'); 
    }); 

    $("#mediaWindow").on('click', '#backLink', function (e) { 
     e.preventDefault(); 
     $("#mediaWindow").html('<div class="onCenterSmall"></div><div class="onCenterSmall"></div><div class="onCenterSmall"></div>'); 
    }); 
});