使用 jquery 访问动态呈现的 html答案

【问题标题】：Access dynamically rendered html with jquery使用 jquery 访问动态呈现的 html
【发布时间】：2014-03-06 14:54:12
【问题描述】：

我正在构建一个页面，用户可以在其中添加类似于 SO 的标签（或关键字）。添加新标签时，我会生成一个 div 并通过下面的 jquery 将其附加到容器 div 中，效果很好。

// add new keyword
        $('.Add_Keyword').click(function () {
            // Perform the ajax post
            $.post("/Content/_AddKeyword", { "keyword": document.getElementById('Keyword').value, "ContentId": document.getElementById('ContentId').value },
                function (data) {
                    // Successful requests get here
                    // Update the page elements
                    document.getElementById('Keyword').value = '';
                    var new_div = $('<div class="float-left" id=tag-"' + data.KeywordId + '">' + data.Keyword + '<a href ="#" class="Remove_Keyword" data-id="' + data.KeywordId + '">[X]</a></div>');
                    $('#all_tags').append(new_div);
                });
        });

新生成的 div 有 id=tag- 并包含关键字（文本）和锚标签，可以点击删除这个关键字。以下是删除标签的jquery：

// remove keyword
        $('.Remove_Keyword').click(function () {
            var keywordToRemove = $(this).attr("data-id");
            $.post("/Content/_RemoveKeyword", { keywordId: keywordToRemove },
                function (data) {
                    // Successful requests get here
                    // Update the page elements
                    debugger
                    if (data.IsDeleted) {
                        var del_div = $('#tag-' + data.DeleteId);
                        del_div.hide();
                    }
                });
        });

这适用于使用 GET 创建的 div，但不适用于动态生成的 div .....任何想法为什么？以下是html：

<fieldset>
<legend>Keywords</legend>
<ol>
    <li>
        @Html.LabelFor(m => m.Keyword)
        @Html.TextBoxFor(m => m.Keyword)
    </li>
    <li>
        <a href="#" class="Add_Keyword">Add</a>
    </li>
</ol>
</fieldset>
<div id="all_tags">
    @foreach (var item in @Model.KeywordList)
    {
        <div class="float-left" id="tag-@item.KeywordId">
            @item.Keyword
            <a href="#" class="Remove_Keyword" data-id="@item.KeywordId">[X]</a>
        </div>
    }
</div>

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

使用.on()为动态生成的html元素附加事件：

$("div[id^=tag-]").on('click','.Remove_Keyword',function (e) {
        e.preventDefault();
        var keywordToRemove = $(this).attr("data-id");
        $.post("/Content/_RemoveKeyword", { keywordId: keywordToRemove },
            function (data) {
                // Successful requests get here
                // Update the page elements
                debugger
                if (data.IsDeleted) {
                    var del_div = $('#tag-' + data.DeleteId);
                    del_div.hide();
                }
            });
});

【讨论】：

我已经更改了相应的代码.....但我仍然无法删除动态添加的 div。虽然函数触发了，但渲染的 html 中似乎不存在“del_div” div....我在 Add 函数中做错了吗？？
看起来一切都很好..你能在POST方法中检查你是否正在获取数据吗？并检查控制台是否有错误。
当我查看源代码时......我在 DOM 中找不到动态创建的 div......这是正确的行为吗？ POST 方法正在返回数据。没有控制台错误
委托的想法奏效了......我的 div 生成代码中也有一个错字...... :) 现在一切都好
@Purusartha：好兄弟。 :)

【解决方案2】：

$(body).on('click', 'newelementid',function () {
$('.Remove_Keyword')
});

Delagation

On in Jquery

【讨论】：

【解决方案3】：

id 的代码中有一个错误的引用，例如：

var new_div = $('<div class="float-left" id=tag-"'

应该是

var new_div = $('<div class="float-left" id="tag-'

你可能不想应用你的.RemoveKeyword点击事件之前你甚至在代码中构建了动态div......所以我会在最后一行之后应用那个事件一旦元素实际存在，您的 ajax 调用 ($('#all_tags').append(new_div);)。

Example JSFiddle

【讨论】：