4

I want to make div editable which is created dynamically. Which is also draggable div .

This is what I tried 

1)$("#divid").attr('contentEditable','true');

2)$("#divid").live("click",function(){
     $(this).click('contentEditable',true);
  });

3)$("#divid").click('contentEditable',true);

but none of the above working. Any idea how to make it working!

Thanks in advance!

sandip
  • 3,279
  • 5
  • 31
  • 54

2 Answers2

7

Since you are having a dynamically created div use .on() handler for it and .prop():

  $(document).on("click", "#divid", function(){
     $(this).prop('contentEditable',true);
  });

find out in fiddle: http://jsfiddle.net/SEvDe/

Jai
  • 74,255
  • 12
  • 74
  • 103
  • @AleksandrM I thought the same but still not working , can this is because of this div is a draggable too? – sandip Jan 04 '13 at 11:55
  • @sandip linked a fiddle in the answer. – Jai Jan 04 '13 at 12:01
  • @Jai: the result of your fiddle is not content editable in chrome. it appears an element can't be both draggable and content editable in chrome, regardless of how it is created. – David Hedlund Jan 04 '13 at 12:08
  • @Jai: No repro in v23 on windows. The div is draggable, but not editable. – David Hedlund Jan 04 '13 at 12:37
  • @DavidHedlund Will you please reexplain above comment – sandip Jan 04 '13 at 13:05
  • @sandip: my last comment was in response to to Jai's last comment. I'm describing the behavior of Jai's fiddle in chrome 23 on windows. – David Hedlund Jan 04 '13 at 13:17
  • @jai,@AleksandrM,@ameyarote,@DavidHedlund Thank you So much for your answers - I just added

    element divid.innerHTML="

    hello!

    "; And it worked!     – sandip Jan 04 '13 at 14:33
1

Fiddle

$("#test").get(0).contentEditable = "true";
$("#test1").attr('contentEditable',true);

It works as a charm.

with javascript u could have tried this 

document.getElementById("contentDiv").contentEditable = "true";
ameya rote
  • 1,116
  • 1
  • 9
  • 13