Question

I’m listening with .live for a ‘click’ on a link (using class) hoping it bubbles up, then .replaceWith to exchange a div (using ID) with a new var ..

<script type="text/javascript">

$(document).load(function(){
  $('a.caption').live('click', function() { <!-- '.caption' or 'caption', I've also tried ID '#caption' and 'div#caption' -->

    var video = $('<div height=""></div>');

    $('div#slider-wrapper').replaceWith(video);
  });
});

<div id="slider-wrapper">

  <div id="slider" class="nivoSlider">

       <img src="image.jpg" alt="" title="#caption1" />

  </div>

  <div id="caption1" class="nivo-html-caption">Stuff</br>
     <a class="caption" href="">where the click happens <!-- this is where I suspect a problem with class, or above with slider-wrapper div-->
     </a>
  </div>

</div> <!--slider wrapper end -->

I’ve tried variations of class, and ID’s. Also both class, and both ID. I’ve read that class is recommended depending on what you need. I’ve also evaluated .click and seems that .live ‘click’ is the right way to listen in my situation.

I’ve checked answers for some time, adjusting my code incrementally. I suspect it’s simple selector use, and my post here is a last resort.

Thank you in advance for considering this simple problem.

Answer 1

$(function(){
  $('a.caption').click(function(e) {
    e.preventDefault();

    var video = $('<div>Hello There</div>');

    $('div#slider-wrapper').replaceWith(video);
  });
});