javascript - Jquery 可调整大小仅适用于最近(最后)动态创建的 div

Question

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

这是jsfiddle .

当您单击“文本按钮”时，您将看到正在生成一个 Bootstrap 面板。您可以从右侧或左侧调整其大小。

但是，一旦您再次单击按钮添加另一个面板，只有第二个面板(刚刚添加的)可以调整大小，而旧面板将不再可以调整大小。为什么会发生这种情况？

我希望它们都可以调整大小。我已尽力保持他们的 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' });}

可排序只是主体内的一个 div，我将其附加到上面，其创建方式如下:

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

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

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

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

Answer 1

不知道为什么这不能按照您的方式工作，但它可以使用 jQuery.appendTo() 方法。这是 fiddle 的链接:http://jsfiddle.net/VYxUk/2/

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

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