Please check the codes..
$(".editable").live("click",function(){
CurrentOBJhtml = $(this).text();
nextHtml = "<input type='text' class='hoverable' value='"+CurrentOBJhtml+"' />";
var c = nextHtml;
alert(c); //here two alert box comes....
$(this).html(c);
});
When i alert c ,it alerting two values in two alert boxes…
first value is <input type='text' value='myname' class='hoverable' />
second one is <input type='text' value='' class='hoverable' /> where the second one doesnt have the value .
When i comment the last line ($(this).html(c);) then it only giving the first result.
What is the problem with me ? i am totally confused.
please help me to solve this issue.
Thank you .
Update :
HTML :
<fieldset id="user_info_module">
<label>username:</label>
<label class="editable" id="user_info_username">
<label>Email:</label>
<label id="user_info_email"> </label>
<label>Default page:</label>
<label id="user_info_defaultpage"></label>
<label>mobile:</label><label id="user_info_mobile"></label>
<label>country:</label><label id="user_info_country"></label>
<label>address:</label><label id="user_info_address"></label>
<label>pincode:</label><label id="user_info_pincode"></label>
<label>landline:</label><label id="user_info_landline"></label>
</fieldset>
First thing put your jquery code inside the $(document).ready(function()); handler.
and check this jsfiddle, it is not showing any double alert box to me. when you click a element then
thiswill refer to that particular element not the others.Update your html code in question to confirm about the exact problem or create a example jsfiddle for your problem.
Edit: Error reasons and solved
Check your updated jsfiddle as per your code. you have missed to close the one tag and the above event bubbling problem occurs when you use this. In updated jquery use
.on()..check .live() documentation at jQuery to konw about this better.