how to remove only tags appended using append() in jquery.

Question

Hi,

I have a div which pops out on mouse over and i am inserting some content using html(). And i want to some part of code to be remain without manipulation.

<div id="pop_div" ><span>X</span></div>


$("#team_div > ul img").bind('mouseenter',function(){
  $("#pop_div").html('<img src="' + img + '"/>' + content );
 });

and onclick i am hiding div.

$('#pop_div span').click(function(){
  $("#pop_div").hide();
});

My problem is, i cant use code below because jquery doesn't assign any event for that tag

$("#pop_div").html('<span>X</span><img src="' + img + '"/>' + content );

(i cant use livequery plugin)

i appreciate your comments.

Answer 1

You are replacing the entire content of your #pop_div, when you insert HTML code, new DOM elements are being created, that's why the event is not binded.

The span element is removed from the DOM and the events attached to it, no longer work.

I think you don't need to replace all the content of that div, you could structure your div like this:

<div id="pop_div" >
  <span>X</span>
  <img/>
  <div id="content"></div>
</div>

In your mouseenter:

$('#team_div > ul img').bind('mouseenter',function(){
  $('#pop_div img').attr('src', img); // set the image source
  $('#pop_div #content').html(content); // display the content
});

The image source is changed, and the content variable is inserted into the '#content' div.

Your click handler will remain like it is now, because the span element is not affected.

Answer 2

CMS is right. Additional starting at jQuery 1.3 you could bind your event with the live function which will bind the event to all current and future elements.

$('#team_div > ul img').live('mouseenter',function(){
  $('#pop_div img').attr('src', img); // set the image source
  $('#pop_div #content').html(content); // display the content
});