live /die

[jimfog]

I have an attached an event handler to an element where upon clicking it an image is appended to it.Nothing wrong so far. On second click though, of this element, I do not want again image element appended? Here is some code

$("#addsrvice").click(function(){    var input= '<input id="servc"size="40" placeholder="Service" type="text" name="Services">';    var price='<input display="block" size="3" placeholder="price" type="text" name="price">';    var field=input+price;   $(this).parent().children("input").eq('5').after(field);$(this).live("click").append('<img id="rem_service" align="center" src="Images/rem_service.png">');return false;		 		    });

I think using live/die is the way to go, what I am trying to find though is the code implementations-this is what troubles me. How to use live/die here?As you see above I have done one step(I hope it is the right one), I have attached live to the appending of the image I am referring to. Now how am I going to use the die method.

[dsonesuk]

$(this).die("click") after img is appended

[jimfog]

Did you mean something like this?

$(this).live("click").append('<img id="rem_service" align="center" src="Images/rem_service.png">');$(this).die("click");

The above does not work-if I click the element 4 times, then the image will be appended also 4 times, something I do not want though.

[dsonesuk]

Ok, right you do not only want the image not show again, BUT! also the input elements also, as these have id ref which must be unique, so your code should be similar to

$("#addsrvice").live(function(){    var input='<input id="servc" size="40" placeholder="Service" type="text" name="Services">';    var price='<input display="block" size="3" placeholder="price" type="text" name="price">';    var field=input+price;   $(this).parent().children("input").eq('5').after(field);$(this).parent().append('<img id="rem_service" align="center" src="Images/rem_service.png">');$(this).die("click")return false;                                });

IF the the image element works as #addsrvice and adds another set of inputs you might want to consider adding a class name to these elements you only want to work once and use

$('.onehitwonder').live('click', function(){$(this).die('click');}); 

[jimfog]

Ok, right you do not only want the image not show again, BUT! also the input elements also, as these have id ref which must be unique, so your code should be similar to

$("#addsrvice").live(function(){	var input='<input id="servc" size="40" placeholder="Service" type="text" name="Services">';	var price='<input display="block" size="3" placeholder="price" type="text" name="price">';	var field=input+price;  $(this).parent().children("input").eq('5').after(field);$(this).parent().append('<img id="rem_service" align="center" src="Images/rem_service.png">');$(this).die("click")return false;								});

No...I want the input elements being added continuously upon repetitive clicks-while the image I wanted to(in other words...5 clicks=5 input elements added) be added only on one click(many clicks=one image added).

[dsonesuk]

What i was pointing out was that id ref, name value ref of any input must be UNIQUE, therefore you would need to look into that! The image is created on the live- click event of #addservices, you can't target this to not work for adding a specific element like an image. You could either remove current image, then use the append to add it back which would always place it at the bottom of newly added inputs, or check index ref of this image with specific id if less than 0, meaning it does not exist(-1) add it, meaning it would add to bottom of first created inputs, but the other added inputs would appear below it.

[jimfog]

What i was pointing out was that id ref, name value ref of any input must be UNIQUE, therefore you would need to look into that! The image is created on the live- click event of #addservices, you can't target this to not work for adding a specific element like an image. You could either remove current image, then use the append to add it back which would always place it at the bottom of newly added inputs, or check index ref of this image with specific id if less than 0, meaning it does not exist(-1) add it, meaning it would add to bottom of first created inputs, but the other added inputs would appear below it.

I got that about the unique name/id attribute of input elements-you are right.But I do not quite understand what are you saying about the issue itself-appending the image.

[dsonesuk]

You say you got the image to append, as far as i can see it does not! it throws up an error and no append of image takes place, it looks as though you can't change the current click event to live() within that same click event function as you have tried.$(this).live("click") is attempting to overwrite $("#addsrvice").click(function() but fails and cause undefined error in JQuery script itself. Unless you are trying to apply live('click') event to appended image?? then you would have create this event function outside the current, with live() then apply the die('click'), but that seems unlikely, right! This on multiple clicks gives many inputs(invalid), but image is removed, and reinstated by the append, so only one image appears on every click of #addsrvice.

$(function(){$("#addsrvice").click(function(){    var input= '<input id="servc" size="40" placeholder="Service" type="text" name="Services">';    var price='<input display="block" size="3" placeholder="price" type="text" name="price">';    var field=input+price;$('#rem_service').remove();$(this).parent().children("input").eq('5').after(field)$(this).parent().append('<img id="rem_service" align="center" src="Images/rem_service.png">');return false;		    				    });});

[jimfog]

yes, your code does what I want but it is a little strange, adding the image first and the removing it... And the problem is that the image is placed not in the position where I want it-I have to use positioning to fix it. Why that happens-I suppose because you target the parent element. I fixed after all. I just removed the outer function...

Edited December 14, 2012 by jimfog

[dsonesuk]

IF you wish for the image to remain at same position when first appended, make an if condition to check how many are found using .index(), .size() or even .length and only append when there are none.

//if($('#rem_service').size() <=0)if($('#rem_service').index() <0){$(this).parent().append('<img id="rem_service" align="center" src="Images/rem_service.png">');}

[jimfog]

I do not need the if statement either. I forgot to say...besides removing the outer function, a slight change in the code was needed also:

$(this).append('<img id="rem_service" align="center" src="Images/rem_service.png">');

With the above code the image gets appended in the place where I want it-almost- just need now to usecss positioning to be more precise.

[dsonesuk]

??? Please tell me this is removed from click function, otherwise if using positioning (absolute), what will happen is multiple images every click, overlapping each over, but you can only see last image at that time.

[jimfog]

??? Please tell me this is removed from click function, otherwise if using positioning (absolute), what will happen is multiple images every click, overlapping each over, but you can only see last image at that time.

The code works as expected, no multiple images appended after repeated clicks.This is the css code to move the image appended precisely where I wanted:

#rem_service{	position: absolute;	 left:56px;	 top:18px;}

Why the above code should create problems-I do not understand that. Summary:

• Append the image with javascript/jquery click-OK
• Position the image with CSS-ok

I have another problem now,I will try yo solve it my own or else post-it is relevant to this topic though. I managed to solve the other problem too...so we are OK for the moment

Edited December 17, 2012 by jimfog