jQuery를 사용하여 div의 내용을 변경하십시오.

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>'); 
    }); 
});