CODEWITHSUNDEEP
javascriptjqueryhtmlalert
Red
Red

Reputation: 6388

Setting the HTML property of an element in jQuery

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>

http://jsfiddle.net/M3J2p/1/

Upvotes: 0

Views: 161

Answers (3)

Niranjan Singh
Niranjan Singh

Reputation: 18290

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 this will 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

Before jQuery 1.7, to stop further handlers from executing after one bound using .live(), the handler must return false. Calling .stopPropagation() will not accomplish this.

$("a").live("click", function(event){
  event.preventDefault();
});

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.

Upvotes: 1

scripto
scripto

Reputation: 2297

I suppose that $(".editable") finds more than one element. If you want to find a specific element, consider using the Id or you can also check whether the target is the correct one in the callback.

$(".editable").live("click",function(event)
{
   if (event.target == mytarget)
   {
         // do something
   }
});

Upvotes: 0

Yazan Malkawi
Yazan Malkawi

Reputation: 501

May be you have two elements with the class "editable" or that you calling the code above twice. Do you have it in document.ready? or calling it through function?

Upvotes: 1

Related Questions