Jquery resizable 仅适用于最近（最后）动态创建的 div

Question

所以我有一个小应用程序，我只需单击一个按钮并动态添加一个 div。

这是jsfiddle。

当您单击“文本按钮”时，您会看到正在生成的引导面板。您可以从右侧或左侧重新调整大小。

但是，一旦您再次单击按钮添加另一个面板，只有第二个（刚刚添加的）可以调整大小，但旧的将不再可以调整大小。为什么会这样？

我希望它们都可以调整大小。我已尽最大努力保持他们的 id 的唯一性，以免他们发生冲突或造成任何问题。

下面是我为单击按钮编写的 javascript 代码。

        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' });}

和 sortable 只是主体内的一个 div，如上所示，我将其添加到该主体中，其创建方式如下：

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

“文本”也是我自己的类，我已将其分配给与“面板”相同的 div。我称可调整大小为“文本”。我还尝试将 resizeable 调用为仅生成的 div 的唯一 id，但这样做是一样的。

我想我已经提供了所有信息，但如果需要任何其他信息来理解问题，我也很乐意提供。

我非常感谢任何帮助，并希望解决这个问题，因为我已经被这个问题困扰了很长一段时间了。

Answer 1

不知道为什么它不像你那样工作，但它使用jQuery.appendTo() 方法工作。这是小提琴的链接：http://jsfiddle.net/VYxUk/2/

更新，经过一番挖掘，我想我知道为什么它不起作用了。这个 stackoverflow 答案表明“innerHTML 将所有现有的 DOM 节点从文档中分离出来”。 What is better, appending new elements via DOM functions, or appending strings with HTML tags?

除了那个答案，我似乎找不到更多关于为什么会这样的信息：/