JQuery - Jquery, clases iguales ejecutan mas de una vez la función

   
Vista:

Jquery, clases iguales ejecutan mas de una vez la función

Publicado por Alberto (2 intervenciones) el 27/12/2013 16:37:27
Estimados:

Agradeceré su ayuda.

Este es el problema.

Dinámicamente y mediante AJAX inserto una tabla más de una vez en el DOM del documento. La tabla tiene el mismo ID y los DIV de la tabla tienen una clase nnn. Al evento click de la clase NNN le he asociado una función AAA.

El problema sucede cuando doy click en un div que tiene asociada la clase NNN. Supuestamente se debería ejecutar una sola vez la funcion AAA, pero, no sucede asi, se ejectuta tantas veces como tablas se hayan insertado en el DOM del documento.

Como puedo evitar que cada una de las Clases NNN pongan en la pila de ejecución varias veces la funcion AAA.

Estye es el código HTML5:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table id="tabAsiSis" class="csstabAsiSis ">
    <tr class="titSubTab" >
        <th colspan="3" class="tdIzq">Asigne Sistemas</th>
    </tr>
 
@foreach (var item in Model) {
    <tr>
        <td id="@ViewBag.codper-@Html.DisplayFor(modelItem => item.cod_sistema)" >
            <div id="divBotFun" class="cssdivToolsMUSistemas cssdivSisCenPro" title="Asigne Programas"></div>
        </td>
        <td class="tdIzq">
            @Html.DisplayFor(modelItem => item.descripcion)
        </td>
        <td class="tdDer">
 
              @if (item.asignado)
                {
                   @Html.CheckBox("Sist" + item.cod_sistema, true,new { @class="chkFunAso"})
                } else {
                   @Html.CheckBox("Sist" + item.cod_sistema, false, new { @class="chkFunAso"})
                }
        </td>
    </tr>
}
</table>


Este es el código JQuery:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type="text/javascript" >
    $(document).ready(function () {
        $('.cssdivToolsMUSistemas').click(function () {
            if ($(this).hasClass('cssdivSistemaCerrar')) {
                $('#trAsoSisPro' + $(this).closest("td").attr("id")).remove();
                $(this).removeClass('cssdivSistemaCerrar');
                $(this).addClass('cssdivSisCenPro');
                return false;
            }
            if ($(this).hasClass('cssdivSisCenPro')) {
                var idnewtr = 'AsoSisPro' + $(this).closest("td").attr("id")
                $("<tr id='tr" + idnewtr + "'><td></td><td colspan=2></td></tr>").insertAfter($(this).closest("tr"));
                $('#' + idnewtr).addClass('tdIzq');
                $(this).removeClass('cssdivSisCenPro');
                $(this).addClass('cssdivSistemaCerrar');
                $(this).css({ 'float': 'none', 'margin': 'auto' });
                funAsignaSistemasPrograma('tr' + idnewtr, $(this).closest("td").attr("id"));
                return false;
            }
        })
    })
 
    var funAsignaSistemasPrograma = function (objtr, codpersis) {
    $.ajax({
        url: "sisSeguridad/showSistemaProgramaPerfil",
        type: "post",
        data: { "d": codpersis },
        success: function (response, textStatus, jqXHR) {
            $('#' + objtr).find("td").eq(1).html(response);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("error");
        },
    })
}
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Jquery, clases iguales ejecutan mas de una vez la función

Publicado por Alberto (2 intervenciones) el 31/12/2013 15:14:18
Gracias a todos los que se interesaron por la problemática.

He solucionado el problema utilizando el metodo on(). Con este método he asociado la funcion AAA a cada TR->TD dinamicos que tuvieran las clases NNN. El unico detalle de este código es que el evento Click se dispara tantas veces como TR->TD- clases NNN existan, es por ello que se verifica si es que el objeto(TR) a insertas existe. En resumen no pude evitsr que se ejecute muchas veces la funcion.

Código Jquery que ha solucionado la problematica:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("td").on("click", ".cssdivSistemaCerrar", function () {
            $('#trAsoSisPro' + $(this).closest("td").attr("id")).remove();
            $(this).removeClass('cssdivSistemaCerrar');
            $(this).addClass('cssdivSisCenPro');
            return false;
        })
 
        $("td").on("click", ".cssdivSisCenPro", function () {
            var idnewtr = 'AsoSisPro' + $(this).closest("td").attr("id")
            if ($('#tr'+idnewtr).length) {return;}
            $("<tr id='tr" + idnewtr + "'><td></td><td colspan=2></td></tr>").insertAfter($(this).closest("tr"));
            $('#' + idnewtr).addClass('tdIzq');
            $(this).removeClass('cssdivSisCenPro');
            $(this).addClass('cssdivSistemaCerrar');
            $(this).css({ 'float': 'none', 'margin': 'auto' });
            funAsignaSistemasPrograma('tr' + idnewtr, $(this).closest("td").attr("id"));
            return false;
        })
    })
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Jquery, clases iguales ejecutan mas de una vez la función

Publicado por xve (557 intervenciones) el 01/01/2014 10:41:56
Gracias por comentarlo Alberto!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar