Ayuda con Jquery al seleccionar boton

Question

 hola amigos recurro a ustedes nuevamente para presentar mi problemática.

1.- quiero que al hacer click en el boton de la imagen se expanda una fila mas de mi tabla contenido el detalle del registro seleccionado.

hasta ahi no hay problema, en la pagina 1 todo funciona muy bien, el problema radica cuando me paso a la pagina 2 o 3 o 4 o 5, deja de funcionar el script este es el código que utilizo.

  //=========================================================
    // Funcion para Obtener el detalle del registro seleccionado
    //=========================================================
    $("#myTable tbody").on('click', 'img', function () {
        var orderid = $(this).attr("orderid");
        var fila = $("#fila-" + orderid);
        if (fila.css("display") == "none") {
            fila.css("display", "table-row");
            $(this).attr("src", "/Content/images/minus.png");
        }
        else {
            fila.css("display", "none");
            $(this).attr("src", "/Content/images/plus.png");
        }
    })

ahora bien los datos en el controlador se cargan con una vista parcial; este es el código del controlador

  public ActionResult Index(SearchOferta model)
        {
            var pageIndex = model.Page ?? 1;

         
            var Result = (from MO in db.MtoOfertas
                          join MR in db.MtoRequerimientos on MO.MtoRequerimientoId equals MR.MtoRequerimientoId into group1
                          from g1 in group1.DefaultIfEmpty()
                          join MP in db.MtoProveedores on MO.MtoProveedorId equals MP.MtoProveedorId into group2
                          from g2 in group2.DefaultIfEmpty()
                          //where MO.MtoProcedimientoId == MtoProcedimiento
                          select new ResultadoOfertas
                          {
                              MtoProcedimientoId = MO.MtoProcedimientoId,
                              MtoProveedorId = MO.MtoProveedorId,
                              MtoOfertaId = MO.MtoOfertaId,                              
                              Partida = g1.Partida,
                              Clave = MO.Gpo + " " + MO.Gen + "" + MO.Esp + "" + MO.Dif + " "+ MO.Var,
                              Gpo = MO.Gpo,
                              Gen = MO.Gen,
                              Esp = MO.Esp,
                              Dif = MO.Dif,
                              Var = MO.Var,
                              Descripcion = g1.Descripcion,
                              Licitante = g2.RazonSocial,
                              PrecioOfertado = MO.PrecioOfertado,
                              Descuento = MO.Descuento,
                              Maximo = MO.MaximoOfertado,
                              Minimo = MO.MinimoOfertado
                          }).OrderBy(o => o.Licitante).ThenBy(o => o.Gpo).ToList();



            if (model.MtoProcedimientoId != 0)
            {
                Result = Result
                   .Where(l => l.MtoProcedimientoId == (int)model.MtoProcedimientoId)
                   .ToList();
            }
            



            if (model.MtoProveedorId != 0)
            { 
                 Result = Result
                    .Where(l => l.MtoProveedorId == (int)model.MtoProveedorId)
                    .ToList();
            }


            model.SearchResult = Result.ToPagedList(pageIndex, 3);

            //ViewBag.MtoProveedorId = new SelectList(GetProveedoresConOferta(Model.MtoProcedimientoId), "MtoProveedorId", "RazonSocial",Model.MtoProveedorId);
            if (Request.IsAjaxRequest())
            {
                return PartialView("_loadOfertas", model);
            }
            else
            {
                return View(model);           
            }           
        
        }

el codigo de la vista parcial es el siguiente:

@model WebDBT.Models.SearchOferta
@using PagedList;
@using PagedList.Mvc;
   

<table id="myTable" class="table-bordered">
    <thead>
    <tr>
        <th>Marcas</th>
        <th class="col-md-1">Licitante</th>
        <th>Partida</th>
        <th class="col-md-1">Clave</th>
        <th>Descripción</th>
        <th>Precio Ofertado</th>
        <th>Descuento</th>
        <th>Cantidad Máxima</th>
        <th>Cantidad Minima</th>
        <th>Acción</th>
    </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.SearchResult)
        {
            <tr>
                <td><img class="expand" src="@Url.Content("~/Content/images/plus.png")" orderid="@item.MtoOfertaId" /></td>
                <td class="col-sm-3">@item.Licitante</td>
                <td>@item.Partida</td>
                <td>@item.Gpo  @item.Gen @item.Esp @item.Dif @item.Var</td>
                <td>@item.Descripcion</td>
                <td>@item.PrecioOfertado.ToString("C") </td>
                <td>@item.Descuento.ToString("N") </td>
                <td>@item.Maximo.ToString("N0")</td>
                <td>@item.Minimo.ToString("N0") </td>
                <td></td>
            </tr>
            <tr id="[e-mail]" style="display:none">
                <td></td>
                <td colspan="11">@Html.Action("GetDetalleOferta", new { id = @item.MtoOfertaId })</td>
            </tr>
        }
    </tbody>
</table>

<div id="paginador">

    @Html.PagedListPager(Model.SearchResult, Page => Url.Action("Index", new RouteValueDictionary {
    {"Page",Page},
    {"MtoProcedimientoId",Model.MtoProcedimientoId}
}), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions { UpdateTargetId = "ajax_main" }))

</div>

y el index es:

@model WebDBT.Models.SearchOferta

<div class="search-main">
    <div id="buttonGrp" class="form-group">
        <div class="panel panel-default" id="searchConditionsPanel">
            <div class="panel-body mysearchpanel">
                @using (Ajax.BeginForm("Index", "Ofertas", FormMethod.Post, new AjaxOptions { OnSuccess = "loadCust" }))
                {
                    @Html.HiddenFor(model => model.MtoProcedimientoId);
                    <div class="col-md-3">
                        <label class="control-label" for="Procedimiento">Procedimiento</label>
                        <div class="controls">                           
                            @Html.TextBoxFor(m => m.NoLicitacion, htmlAttributes: new { @id = "NoLicitacion", @class="form-control"})
                          
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="control-label" for="Licitante">Licitante</label>
                        <div class="controls">                           
                            <select id="IdLicitante" name="IdLicitante" class="form-control"></select>
                        </div>
                    </div>

                    <div class="col-md-2">
                        <label class="control-label">&nbsp;</label>
                        <div class="controls">
                            <input type="submit" value="Buscar..." class="btn btn-success"><span class="fa fa-search"></span>
                        </div>
                    </div>
                }
                <div class="col-md-5">
                </div>  
                                              
            </div>    
            <div id="ajax_main">
                @Html.Partial("_loadOfertas", @Model)
            </div>             
                  
        </div>      
    </div>                    
</div>

@section scripts{

    @Scripts.Render("~/bundles/jqueryval")    
    @Scripts.Render("~/Scripts/WebScript/Apertura.js")

    <script type="text/javascript">
        function loadCust(result) {
            $("#ajax_main").html(result);
        }
    </script>
}

creen que me puedan echar una mano para poder solucionar esta problematica.

muchas gracias

---

Horacio Xochitemol Bautista

Answer 1

coloca este código en el index

  $(document).on("click", "#myTable tbody tr img", funtion() {
        var orderid = $(this).attr("orderid");
        var fila = $("#fila-" + orderid);
        if (fila.css("display") == "none") {
            fila.css("display", "table-row");
            $(this).attr("src", "/Content/images/minus.png");
        }
        else {
            fila.css("display", "none");
            $(this).attr("src", "/Content/images/plus.png");
        }
    })

---

Att. Franklin Andino

Answer 2

Muchas gracias

---

Horacio Xochitemol Bautista