button doesnt work after load partialview with AJAX

Question

i have a page that have two buttons Next and Previos. This buttons load a table in a PartialView. My problem is when i press the button second time, it doesnt work.

Here is the code

The View :

<div id="Centros">
                <div class="divPantalla2">
                    <table cellspacing="0" class="table table-hover table-responsive table-bordered">
                        <tr>
                            <th class="thTablas">
                                Nombre
                            </th>
                            <th class="thTablas">
                                Nro- Establecimiento
                            </th>
                            <th class="thTablas">
                                Departamento
                            </th>
                            <th class="thTablas">
                                Localidad
                            </th>
                            <th class="thTablas">
                            </th>
                        </tr>
                        @if (ViewBag.OnePageOfCEProyecto != null)
                        {



                            foreach (ANEP.Models.CentroEducativoModel item in ViewBag.OnePageOfCEProyecto)
                            {

                            <tr>
                                <td>
                                    @item.Nombre
                                </td>
                                <td>
                                    @item.NroEstablecimiento
                                </td>
                                <td>
                                    @if (item.dDepartamento != null)
                                    {
                                        @item.dDepartamento.Descripcion;
                                    }
                                </td>
                                <td>
                                    @if (item.dLocalidad != null)
                                    {
                                        @item.dLocalidad.NomLocalidad;
                                    }
                                </td>
                                <td>
                                    <button  type="submit" value="Eliminar+@item.CEID"  name="Command" class="btn_eliminar">
                                    </button>
                                </td>
                            </tr>         
                            }

                        }
                    </table>
                </div>
                <div id="botones">
                    @if (ViewBag.OnePageOfCEProyecto != null)
                    {
                        <div align="center">
                            <div align="center">
                                @if (Session["PROYECTO_PAGINA_ACTUAL"] != null && int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString()) > 1)
                                {

                                    <button type="button" id="Primera" value="Primera1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8"><<</font></button>

                                    <button type="button" id="Anterior" value="Anterior1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8"><</font></button>
                                }
                                <font color="#0C58A8">@int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString())</font>
                                @if (ViewBag.OnePageOfCEProyecto.Count == 8)
                                {

                                    <button type="button" id="Siguiente" value="Siguiente1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8">></font></button>

                                    <button type="button" id="Ultima" value="Ultima1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8">>></font></button>
                                }
                            </div>
                        </div>
                    }
                </div>
            </div>

The PartialView :

                <div class="divPantalla2">
                    <table cellspacing="0" class="table table-hover table-responsive     table-bordered">
                        <tr>
                            <th class="thTablas">
                                Nombre
                            </th>
                            <th class="thTablas">
                                Nro- Establecimiento
                            </th>
                            <th class="thTablas">
                                Departamento
                            </th>
                            <th class="thTablas">
                                Localidad
                            </th>
                            <th class="thTablas">
                            </th>
                        </tr>
                        @if (ViewBag.OnePageOfCEProyecto != null)
                        {



                            foreach (ANEP.Models.CentroEducativoModel item in ViewBag.OnePageOfCEProyecto)
                            {

                            <tr>
                                <td>
                                    @item.Nombre
                                </td>
                                <td>
                                    @item.NroEstablecimiento
                                </td>
                                <td>
                                    @if (item.dDepartamento != null)
                                    {
                                        @item.dDepartamento.Descripcion;
                                    }
                                </td>
                                <td>
                                    @if (item.dLocalidad != null)
                                    {
                                        @item.dLocalidad.NomLocalidad;
                                    }
                                </td>
                                <td>
                                    <button  type="submit" value="Eliminar+@item.CEID"  name="Command" class="btn_eliminar">
                                    </button>
                                </td>
                            </tr>         
                            }

                        }
                    </table>
                </div>
                <div id="botones">
                    @if (ViewBag.OnePageOfCEProyecto != null)
                    {
                        <div align="center">
                            <div align="center">
                                @if (Session["PROYECTO_PAGINA_ACTUAL"] != null && int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString()) > 1)
                                {

                                    <button type="button" id="Primera" value="Primera1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8"><<</font></button>

                                    <button type="button" id="Anterior" value="Anterior1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8"><</font></button>
                                }
                                <font color="#0C58A8">@int.Parse(Session["PROYECTO_PAGINA_ACTUAL"].ToString())</font>
                                @if (ViewBag.OnePageOfCEProyecto.Count == 8)
                                {

                                    <button type="button" id="Siguiente" value="Siguiente1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8">></font></button>

                                    <button type="button" id="Ultima" value="Ultima1" name="Command" class="btn btn-primary">
                                        <font color="#0C58A8">>></font></button>
                                }
                            </div>
                        </div>
                    }
                </div>

The AJAX function (only for the button next):

$(document).ready(function () {
        $("#Siguiente").on("click", function () {
            var accion = $('#Siguiente').val();
            $.ajax({
                url: "/Proyecto/TablaCentros",
                type: "GET",
                cache: false,
                data: { command: accion }
            })
        .done(function (partialViewResult) {
            $("#Centros").html(partialViewResult);
        });
        });
    });

And the controller :

public ActionResult TablaCentros(string command, Proyecto p)
    {
        if (command != null)
        {
            if (command.Contains("Siguiente1"))
            {
                if (Session["REGISTRO_PROYECTO"] != null)
            {
                Proyecto model = p;
                int page = (int)Session["PROYECTO_PAGINA_ACTUAL"];
                page++;
                Session["PROYECTO_PAGINA_ACTUAL"] = page;
                List<CentroEducativoModel> lista =   (List<CentroEducativoModel>)Session["PROYECTO_CENTRO_EDUCATIVOS"];
                var onePageOfCEProyecto = lista.ToPagedList(page, 8); // will only contain 15 products max because of the pageSize
                ViewBag.OnePageOfCEProyecto = onePageOfCEProyecto;
                cargarEstadoProyecto();
                cargarCentroEducativos();
                cargarClaseProyecto();
                cargarTipoProyecto();
                return PartialView("_TablaCentros", model);
            }
            }
        }
        return PartialView("_TablaCentros");
    }

Sorry for my English,

Thanks!!!

Answer 1

It looks like your buttons are part of your partial view. When you initially load your view (without ajax) your button is bound to your click handler and all is well. When you click that button, your handler fires, makes the request and then replaces the #Centros content with the response -- however your bound button is part of the content that is replaced and your "new" buttons aren't bound.

You will need to rebind your handlers to your buttons after the ajax request has completed and you've loaded the result. You have a couple of options -- you can move your script to your partial view so it would fire after it's loaded, you can call your binding code in your done() handler or you can change your selector for your existing code to use a delegate.

I would use the delegate which would look similar to this:

$("#Centros").on("click", "#Siguiente", function() { ... })

This essentially means that anytime a click event happens in #Centros to an element with an ID of #Siguiente then handle the event.

Answer 2

I hope what ny answer will help you. What I have noticed in the signature of your Action in the controller it is supposed to receive two arguments command and Proyecto but on your ajax function you just pass command:accion So your Action does not receive the object Proyecto.