动态元素和点击事件未触发

Question

我正在从列表中生成元素，每个元素都会有一个点击事件。 这都在同一个局部视图中，每经过 X 秒刷新一次。

第一次初始加载不起作用。每次自动刷新局部后都可以正常工作。

所有（文档）.ready 事件触发。

点击事件之外的其他代码触发就好了。

循环显示

<div id="@overview.GroupType.Name" class="tile @overview.AlertType.MetroBG ui-widget-content draggable" data-role="tile" style="z-index: 2;">
    <div class="tile-content iconic" style="z-index: 2;">
        <span class="icon @overview.AlertType.MetroImage @overview.AlertType.MetroFG"></span>
        <span class="tile-badge @overview.AlertType.MetroBadgeBG @overview.AlertType.MetroBadgeFG">@overview.BadgeCount.ToString()</span>
        <span class="tile-label no-padding fg-white">@overview.GroupType.Description</span>
    </div>
</div>

(document).ready 的脚本部分中的循环生成以下内容

$('#@overview.GroupType.Name').on("click", function () {
    alert('click');
    $.ajax({
        type: 'GET',
        url: '@Url.Action("LoadDetail", "Home")',
        dataType: 'html',
        data: { 'groupName': '@overview.GroupType.Name' },
        async: true,
        cache: false,
        success: function (data) {
            $("#monitorDetail").html(data);
            },
            error: function (xhr, status) {
        }
        })
    });

我读了几篇文章说你必须使用 .on("click" ...) 所以我不知道还有什么要研究的。

Answer 1

$('body').on('click', '#@overview.GroupType.Name', function(){
    // do stuff here
});

您可以将 body 选择器替换为动态 div 的非动态父级。我希望这是有道理的。

Answer 2

这就是我从你的问题中得到的，但仍然有点混乱：

1) 您每 5 秒使用 ajax 动态地将某些内容加载到主视图中。

2) 发生这种情况时，您需要将事件绑定到此动态内容中的某些内容。

3) 它不工作（肯定不行，你问我们）。

解决方案：

您必须在部分刷新之后在成功方法处绑定任何事件。为什么？因为你改了DOM，第一个$('document').ready第一次没有发现这个用ajax加载的内容。

$('#@overview.GroupType.Name').on("click", function () {
    alert('click');
    $.ajax({
        type: 'GET',
        url: '@Url.Action("LoadDetail", "Home")',
        dataType: 'html',
        data: { 'groupName': '@overview.GroupType.Name' },
        async: true,
        cache: false,
        success: function (data) {
            $("#monitorDetail").html(data);
        //Bind the events to for anything after loading the content
            },
            error: function (xhr, status) {
        }
        })
    });

只有当脚本在主视图中时，上面的脚本才有效，因为它需要 Razor Server Render 来构建 id '#@overview.GroupType.Name'。您不能在部分使用动态脚本。 Ajax 不会执行此脚本。