Jquery resizeable only works on the recent(last) dynamically created div

Question

So I have a small application in which I am just clicking a button and adding a div dynamically.

Here's the jsfiddle.

When you will click the "Text Button" you'll see a Bootstrap panel being generated. You can re-size it from the right or the left.

But once you add another panel by clicking the button again, only the second one (just added) will be resizeable but the old one will not be resizeable any more. Why is this happening?

I want them all to be resizeable. I have tried my best to keep their id's unique so that they don't clash or create any sort of problem.

Below is the javascript code that I have written for the button click.

        var richTextDiv = 0;
richTextLink.onclick = function (e) {
        e.preventDefault();

        richTextDiv++;

        sortable.innerHTML +='<article id="rich_text_' + richTextDiv + '" class="text">'
        +'<div class="panel panel-info richText_panel **texts** rich_text_panel' + richTextDiv + '">'

        +'  <div class="panel-heading">'

        +'      Rich Text'

        +'  <button type="button" class="close" onclick="removeWidget('+richTextDiv+',\'rich_text_\')" aria-hidden="true">&times;</button>'
        +'  </div>' // bootstrap panel heading end

        +'<div class="panel-body">'

        +'<div class="summernote-'+richTextDiv+'">Hello</div>'

        +'</div>'

              +'</div>'

        +'</article>';

        $( ".texts" ).resizable({ minWidth: 311, handles: 'e, w' });}

and sortable is simply a div inside the body to which I am appending as seen above and is created like:

<div id="content">
<h1 class="title"> Canvas </h1>
<div id="sortable">

Also "texts" is my own class which I have assigned to the same div as the "panel". And I am calling resizeable to "texts". I have also tried to call resizeable to only the unique id's of the divs being generated but that does the same thing.

I think I have provided all the information but If anything else is needed to understand the problem, I would be happy to provide that too.

I would really appreciate any help with this and would like to sort this out as I have been stuck with this problem for quite some while now.

Thanks for noticing. But this was not the problem. I missed that. I have updated the question as well. — Faizan, Feb 09 '14 at 08:02
Anyone? Willing to help me with this? I would really appreciate it. Thanks. — Faizan, Feb 09 '14 at 08:02
Here it is. [jsfiddle](http://jsfiddle.net/fezi/aN7X4/3/). I have added it in the question too. Thanks! — Faizan, Feb 10 '14 at 07:17

score 4 · Accepted Answer · edited May 23 '17 at 12:06

4

not sure why that doesn't work the way you did it, but it works using the jQuery.appendTo() method. Here's a link to the fiddle: http://jsfiddle.net/VYxUk/2/

update, after some digging, i think I know why it doesn't work. This stackoverflow answer suggests that "innerHTML detaches all existing DOM nodes" from the document. What is better, appending new elements via DOM functions, or appending strings with HTML tags?

Other than that answer though, I can't seem to find any more information on why this is :/

edited May 23 '17 at 12:06

Community

1
1

answered Feb 10 '14 at 07:33

Jan Drewniak

1,316
15
18

Awesome!! Thank you so much Jan. Works like a charm. The problem was exactly what you have linked to. Using **innerHTML detaches all existing DOM nodes from the document.** Great. Thanks. – Faizan Feb 11 '14 at 21:49

Jquery resizeable only works on the recent(last) dynamically created div

1 Answers1