Javascript 在动态添加新对象时停止答案

【问题标题】：Javascript stops when add new objects dynamicallyJavascript 在动态添加新对象时停止
【发布时间】：2014-05-02 17:09:06
【问题描述】：

我正在尝试动态添加新的“li”对象，这些对象背后有一些 JS，但是当我添加它们时，添加的“li”中的 JS 不起作用。

这是 JS：JavaScript File

这就是我添加新“li”的方式：

$(document).ready(function () {
    $('#search-bar').keyup(function (event) {
        if (event.keyCode == 13) {

            addNew();

        }
    });

    function addNew() {
        var city = $('#search-bar').val();
        $.ajax({
            url: '@Url.Action("getWeatherSearch", "Index")',
            data: { city: city },
            async: false,
            complete: function (resp) {
                $("#rb-grid").prepend(resp.responseText);
            }
        });
    } });

我在控制器中调用的 C# 函数返回一个带有“li”的字符串。

只是调用 Boxgrid.init() 并没有帮助。

【问题讨论】：

您使用async : false 有什么特别好的理由吗？
你调试过JS确认resp.ResponseText中包含的内容吗？
如果您提供一个小而完整的示例来演示问题，我们也会更轻松地为您提供帮助（即拨打ajax 并尝试prepend 某事到`#rb-grid')
@Vinicius 我不认为 LeeTaylor 说这是问题所在。但是，在任何情况下都很难证明同步调用的合理性。我认为他只是在指出您可能应该删除 async: false 并让它按照本意是异步的。
@Vinicius 我假设您的意思是您的事件处理程序没有处理新的 li 元素？这很常见。你应该尝试这样的事情... `$('#parentOfLiElements').on('click', 'li', function(ev) {});基本上，您将事件处理程序附加到父元素并让来自 li 元素的事件冒泡。它还允许新元素工作，因为事件不直接绑定到 li 元素本身

标签： c# javascript jquery html css

【解决方案1】：

使用

$('#parentofli').on('click', 'li', function(e) {
   $(this). whatever you want to do on the li
});

当你希望 JS 在动态插入的对象上运行时

当您在选择器上使用常规 javascript 时，当文档准备好时，所有内容都会被绑定。如果之后插入一个元素，JS 函数不知道它存在，因此它不会绑定。

当您使用父级作为选择器时，javascript 将绑定到父级本身，并且每当您单击父级时，它将遍历每个父级绑定函数并查看它是否匹配

【讨论】：