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
– Murali Murugesan, Commented Mar 28, 2014 at 13:52
how do i reload all the functions of jQuery. Where they are defined? — Murali Murugesan
– Murali Murugesan, Commented Mar 28, 2014 at 13:54
possible duplicate of Event binding on dynamically created elements? — Patrick Evans
– Patrick Evans, Commented Mar 28, 2014 at 13:55

Jonline · Accepted Answer · 2014-03-28 13:57:12Z

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, 2014 at 13:57

Jonline

1,7672 gold badges23 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Murali Murugesan · Accepted Answer · 2014-03-28 14:12:55Z

1

Initialize once again in your ajax callback

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

edited Mar 28, 2014 at 14:12

answered Mar 28, 2014 at 13:56

Murali Murugesan

22.6k18 gold badges76 silver badges123 bronze badges

2 Comments

Vinicius Over a year ago

i'm not using click i'm using keyup, when the user press enter in a textbox

Murali Murugesan Over a year ago

@Vinicius, it was just an assumption made before you edit the post

Ohjay44 · Accepted Answer · 2014-03-28 14:03:33Z

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, 2014 at 14:03

Ohjay44

8977 silver badges20 bronze badges

Collectives™ on Stack Overflow

Reload jQuery functions after Ajax call

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related