Question

if i have this html

<div class="whole">This is a <div class="min">Test</div></div>

i want to change the html of the “whole” div when i click on the “min” div:

i have tried this below, but it doesn’t seem to work.

$(document).ready(function() {
    $('div.min').live('click', function() {
         $(this).prev('.whole').html("<img  BORDER=0 src='../../images/copy1.png' />");
    });
});

does anyone have any ideas on whats going wrong here ?

Answer 1

You want parent, not prev. Your div.min is inside, not next to, the div.whole. So:

$(document).ready(function() {
    $('div.min').live('click', function() {
         $(this).parent('.whole').html("<img  BORDER=0 src='../../images/copy1.png' />");
    });
});

---

2017 update: live has been deprecated for years and was eventually removed. It’s used in the above because it was in the OP’s original code and wasn’t the issue, but just for completeness, the current way to do this is with on‘s delegation signature:

$(document).on('click', 'div.min', function() {
     $(this).parent('.whole').html("<img  BORDER=0 src='../../images/copy1.png' />");
});

Note that we don’t even need the ready, since this is doing event delegation on document, so it doesn’t have to wait. (That was true of the live version above as well.)