Tengo un menú llamado "INICIAR SESIÓN" (id="log") y un submenú llamado "Conectar" (id="connect"). Si hago clic en conectar, se muestra un formulario. Ahora, cuando el inicio de sesión del usuario es exitoso, quiero cambiar el menú de nombre "INICIAR SESIÓN" para el nombre de usuario y "Conectar" para "Bandeja de entrada", esto funciona, pero necesito cambiar ambos identificadores y eliminar el detector de eventos $('#connect').click(function(e) {} porque el usuario estaba conectado y necesito un nuevo evento en "bandeja de entrada" como

$('#inbox').click(function(e) { alert("You click on inbox");    });

Javascript

 $(document).ready(function() {


                function Login() {


                    this.loadForm = function() {

                        $("#response-container").load("formLogin.php", function() {

                            $("#formLogin").submit(function(event) {

                                var user = $("#username").val();
                                var pass = $("#password").val();

                                event.preventDefault();

                                searchData(user, pass);

                            });

                        });

                    }; //END loadForm FUNCTION




                    var searchData = function(user, pass) {

                        getdetails(user, pass)

                        .done(function(response) {

                            if (response.success) {

                                $.each(response.data.users, function(key, value) {

                                    $("#log").text(value['userName']);

                                    $("#connect").text('inbox');


                                    //HERE I WANT TO REMOVE CLICK EVENT FROM #conect and i want to
                                    //change his 'id' for a new id called 'inbox' and add a new
                                    //click event listener                                   

                                });
                            } else {

                                alert("Fail");

                            }
                        })

                        .fail(function(jqXHR, textStatus, errorThrown) {


                        });


                    }; //END FUNCTION searchData




                    var getdetails = function(id, password) {

                            return $.getJSON("20.php", {
                                "id": id,
                                "password": password
                            });

                        } //END FUNCTION getdetails




                }; //END LOGIN CLASS



                //LISTENERS

                $('#connect').click(function(e) {

                    e.preventDefault();

                    var login = new Login();

                    login.loadForm();

                });




            });

Html

<!DOCTYPE html>
<html lang="es-ES"><html>
    <head>
         <meta charset="utf-8">
          <link rel="stylesheet" type="text/css" href="21-12-16.css">
        <script src="//code.jquery.com/jquery-latest.js"></script>


  <script src="20.js"></script>


        <title>Menu</title>

    </head>
    <body>

        <div id="header">
            <ul class="nav">
                <li><a href="">Home</a></li>
                <li><a href="" id="log">LOGIN</a>
                    <ul>
                        <li><a href="" id="connect">Conect</a>

                        </li>
                    </ul>
                </li>


            </ul>
        </div>
     <div id="response-container"></div>
    </body>
</html>
0
Sergio Diaz 14 ene. 2017 a las 18:18

3 respuestas

La mejor respuesta

$("#connect").unbind(); eliminar todos los eventos

$("#connect").attr('id','inbox'); cambiar id

$("#inbox").click(function (){

//click event

})

Su código ahora se verá así:

$.each(response.data.users, function(key, value) {

$("#log").text(value['userName']);

$("#connect").text('inbox');

$("#connect").unbind();


$("#connect").attr('id','inbox');

    $("#inbox").click(function (){

    //click event

    })

 });
0
codenut 14 ene. 2017 a las 15:45

unbind y bind están en desuso. debe usar off para desvincular y on para vincular.

1
user5349610user5349610 14 ene. 2017 a las 16:02

Puede usar unbind en el objeto jquery para eliminar el evento y la función attr para cambiar la identificación

$('#connect').unbind('click').click(//function click here)
$('#connect').attr('id','inbox');

Referencia attr, desvincular

0
Marco Moretti 14 ene. 2017 a las 15:34