Reload jQuery functions after Ajax call

Question

I don't know a lot about jQuery, and I want know how do I reload all the functions of jQuery after a ajax call, because I add element in a and then the new element don't work but the others work fine.

The ajax call:

$(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:

The textbox: @Html.TextBox("search-bar", "", new { @class = "search-bar", placeholder = "Pesquisar" })

This is where I wnat to add the new

that I create dinamically, calling the method from c# using the ajax:

        <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>

this is how I activate Boxgrid:

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

Please add the element function you wrote in document.ready() — Murali Murugesan, Mar 28 '14 at 13:52
`how do i reload all the functions of jQuery`. Where they are defined? — Murali Murugesan, Mar 28 '14 at 13:54
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Patrick Evans, Mar 28 '14 at 13:55
Ok. Tell us what part of the jQuery code is not working after ajax call? — Murali Murugesan, Mar 28 '14 at 14:06
@MuraliMurugesan i have a BoxGrid jQuery, that make some effects to open the items, but when add a new element it stop working, but only the boxgrid... — Vinicius, Mar 28 '14 at 14:08
Ok. where is the code for `boxgrid` configuration. It is really tough to ask every time .. anyway code please — Murali Murugesan, Mar 28 '14 at 14:09

Murali Murugesan · Answer 1 · 2014-03-28T14:12:55.927

1

Initialize once again in your ajax callback

 success: function (resp) {
     Boxgrid.init();
 }

edited Mar 28 '14 at 14:12

answered Mar 28 '14 at 13:56

Murali Murugesan

21,303
16
65
114

i'm not using click i'm using keyup, when the user press enter in a textbox – Vinicius Mar 28 '14 at 13:59
@Vinicius, it was just an assumption made before you edit the post – Murali Murugesan Mar 28 '14 at 14:00

score 1 · Answer 2 · answered Mar 28 '14 at 13:57

1

What you need to do is add the capacity to bind events to newly added DOM elements; your code currently is only being bound to current DOM elements.

Instead, use $.on() to do something like:

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

answered Mar 28 '14 at 13:57

Jonline

1,499
2
20
49

score 0 · Answer 3 · answered Mar 28 '14 at 14:03

0

Are you using a viewModel? If so you need to rebind your viewmodel after your AJAX success function. You need to put a little more code before can further help you.

answered Mar 28 '14 at 14:03

Ohjay44

938
6
19

Reload jQuery functions after Ajax call

3 Answers3