javascript - Ajax 调用后重新加载 jQuery 函数

Question

我对 jQuery 了解不多，我想知道如何在 ajax 调用后重新加载 jQuery 的所有函数，因为我在 a 中添加元素，然后新元素不起作用，但其他元素起作用很好。

ajax 调用:

$(document).ready(function () {

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

        }
    });

        var city = $('#search-bar').val();
        $.ajax({
            url: '@Url.Action("getWeatherSearch", "Index")',
            data: { city: city },
            //async: false,
            error: function (resp) {
                var div = document.getElementById('rb-grid');
                div.innerHTML = resp.responseText + div.innerHTML;
            },
            success: function (resp) {
                $("#rb-grid").prepend(resp);
            }
        });

HTML:

文本框: @Html.TextBox("搜索栏", "", new { @class = "搜索栏", placeholder = "Pesquisar"})

这是我想要添加动态创建的新

的地方，使用ajax从c#调用方法:

        <ul id="rb-grid" class="rb-grid clearfix">

            <li class="icon-clima-1 rb-span-2">
                <h3>@ViewBag.CurrentCity</h3><span class="rb-temp">@ViewBag.CurrentTemp°C</span>
                <div class="rb-overlay">
                    <span class="rb-close">close</span>
                    <div class="rb-week">
                        <div><span class="rb-city">@ViewBag.CurrentCity</span><span class="icon-clima-1"></span><span style="font-size: 60px !important;">@ViewBag.CurrentTemp ºC</span><span style="font-size: 40px !important;">Min: @Next0.tempMinC ºC</span></div>
                        <div style="width: 17.5%;"><span>@Next1.date.DayOfWeek.ToString().Substring(0, 3)</span><span class="icon-clima-1"></span><span style="font-size: 40px !important;">Max: @Next1.tempMaxC ºC <br /><br /> Min: @Next1.tempMinC ºC</span></div>
                        <div style="width: 17.5%;"><span>@Next2.date.DayOfWeek.ToString().Substring(0, 3)</span><span class="icon-clima-1"></span><span style="font-size: 40px !important;">Max: @Next2.tempMaxC ºC <br /><br /> Min: @Next2.tempMinC ºC</span></div>
                        <div style="width: 17.5%;"><span>@Next3.date.DayOfWeek.ToString().Substring(0, 3)</span><span class="icon-clima-1"></span><span style="font-size: 40px !important;">Max: @Next3.tempMaxC ºC <br /><br /> Min: @Next3.tempMinC ºC</span></div>
                        <div style="width: 17.5%;"><span>@Next4.date.DayOfWeek.ToString().Substring(0, 3)</span><span class="icon-clima-1"></span><span style="font-size: 40px !important;">Max: @Next4.tempMaxC ºC <br /><br /> Min: @Next4.tempMinC ºC</span></div>
                    </div>
                </div>
            </li>

这就是我激活 Boxgrid 的方法:

<script>
    $(function () {
        Boxgrid.init();
    });
</script>

Answer 1

您需要做的是添加将事件绑定(bind)到新添加的 DOM 元素的能力；您的代码当前仅绑定(bind)到当前 DOM 元素。

相反，请使用 $.on()做类似的事情:

$(<selector>).on(<event>, <callback) 。