Javascript 使用jquery动态插入html时find（）出现问题

我有一个模型，其中有一个按钮网格，表示不同的html组件。当按下其中一个按钮时，一些html应该在模式关闭后注入页面。但是，我在确定要注入html的特定列时遇到了问题。这是我的密码：

<div class="row" id="newRow">
    <div class="col-md-12 column">
        <button class="btn addElement" href="#" data-toggle="modal" data-target="#add-element"><i class="fa fa-plus fa-3x add-item"></i></button>
    </div>
</div>

到目前为止，一切正常。我在获取列的唯一id（在我的

assignId（）

函数中定义）方面没有问题

如前所述，单击addElement按钮，打开一个模式，即执行此代码时：

$(document).on('click', 'button.addElement', function (e) {
    e.preventDefault();

    $('#add-element').modal('show').draggable();

    var col = $('button.addElement').parent();

    // debugging in the browser verifies that the colId
    // successfully stores the id attribute for the column
    var colId = col.attr('id');

    addElements(colId);
});

...

function addElements(colId) {
    $('#insert-paragraph').on('click', function () {
        var html_content = '<div class="box" data-type="paragraph">...</div>';
        $("#newRow").find("#"+colId).html(html_content)

        $('#add-element').modal('hide');
    });   
}

我记录了两次这些值。首先，在将

colId

传递到addElements函数之前，以及在

$（#newRow”）之后的addElements函数中。查找（#“+colId）.html（html_内容）；

这两个测试的结果如下：

运行加法器之前的值：

console.log（colId）；=8153-1076-641d-3840
console.log（$（“#newRow”）.length；=对象[div#newRow.row.clearfix]
console.log（$（“#newRow”）.find（“#”+colId.length）；=1
console.log（$（“#newRow”）.find（“#”+colId.html（））；=。。。

按下“插入段落”按钮后的值：

console.log（colId）；=8153-1076-641d-3840
console.log（$（“#newRow”）.length；=对象[div#newRow.row.clearfix]
console.log（$（“#newRow”）.find（“#”+colId.length）；=1
console.log（$（“#newRow”）.find（“#”+colId.html（））；=。。。

有趣的是，看起来一切都像我期望的那样工作，然而，当一切都说了又做了，addElement按钮仍然存在，页面仍然呈现以下内容：

<div id="newRow" class="row clearfix">
    <div id="32aa-ab91-f50d-c3b3" class="col-md-12 column ui-sortable">
        <button class="btn addElement" data-target="#add-element" data-toggle="modal" href="#">
            <i class="fa fa-plus fa-3x add-item"></i>
        </button>
     </div>
</div>

---

.find

与大多数jquery函数一样，使用css选择器作为参数。不幸的是，colId只是一个字符串，所以它不匹配任何元素（除非colId是html、span或类似的东西）

您只是缺少在开始时添加id选择器以进行id匹配：

.find("#"+colId)

---

我猜button的父级是一个div，它没有id。

var col=$（'button.addElement'）.parent（）；

---

因此var colId没有任何价值。给那个div一个id就可以了。

你好，朱维安，谢谢你的回复！不幸的是，这也是我的第一个想法。我想你是对的，

（“#”+colId）

至少应该是这样的格式（并将在我的原始帖子中更新），但即使更改了格式，addElement按钮仍然保留，并且它仍然不会插入

html\u内容

@wrigley06 does console.log（colId）给出正确的输出？在没有模式选项的情况下尝试并单击事件可以正常工作：Hi@juvian，当我记录

colId

时，输出的ID是：

0b0c-7ffc-d732-2bb9

。我不知道这为什么会导致问题，但有没有可能从模式内触发的事件执行html插入时出现问题？我问你有两个原因。1）你链接到的代码有效，唯一不同的是我的代码在第二个事件处理程序中执行；2）当我调试时，它看起来像

$（'#插入段落'）。在（'click'，函数（）{…}

在我单击按钮之前正在执行。也许问题就在那里？@wrigley06尝试一个console.log（$（“#newRow”）.length以确保它仍然存在，然后是console.log（$（“#newRow”）.find（“#“+colId.length”），然后是console.log（$（“#newRow”）.find（$）.find（$（“#“+colId.html（））我能够记录您要求我记录的值。我已将结果附加到我的原始帖子中，以获得额外的空间。正如您将看到的，看起来一切都像我期望的那样正常工作，但我在模式中单击“段落”按钮，它关闭，并且应该被替换的同一个“添加元素”按钮保持不变。嗨，Koustav.T感谢您的响应。

var col

指的是按住按钮的div。在本例中，这是

（该id由我的

assignId（）

函数自动分配）。

var colId

用于存储

var col

的id属性，并成功地完成了此操作（通过Firebug验证）.不客气。在这种情况下，正如朱维安所指出的那样，只需在“#”之前加上“#”，就可以了，，

console.log(colId);                               = 8153-1076-641d-3840
console.log($("#newRow")).length;                 = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <button class="btn addElement"...>...</button>

console.log(colId);                               = 8153-1076-641d-3840
console.log($("#newRow")).length;                 = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <div class="box box-element" data-type="paragraph">...</div>

<div id="newRow" class="row clearfix">
    <div id="32aa-ab91-f50d-c3b3" class="col-md-12 column ui-sortable">
        <button class="btn addElement" data-target="#add-element" data-toggle="modal" href="#">
            <i class="fa fa-plus fa-3x add-item"></i>
        </button>
     </div>
</div>

.find("#"+colId)