Button with jquery does nothing

Question

Button with jquery does nothing

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I'm trying to do something and I've started with the simplest part, to show a message when I click on a button with jquery, I searched the internet and tried it in several ways, but the button simply does not do anything.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
        <TITLE></TITLE>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">         
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
    <br>
        <div class="container-fluid">
            <br>
            <div class="row">
                <div class="col-md-10">
                    <ul class="nav nav-pills">
                        <li role="presentation" ><a href="plantillas.php">Plantillas</a></li>
                        <li role="presentation" ><a href="index.html">Inicio </a></li>
                        <li role="presentation" class="active"><a href="facturacion.php">Facturación</a></li>
                        <li role="presentation"><a href="iniciar_sesion.php">Iniciar Sesión</a></li>
                        <li role="presentation"><a href="registrarse.php">Registrarse</a></li>
                        <li role="presentation"><a href="buscador_de_plantillas.php">Buscador de plantillas</a></li>
                    </ul>
                </div>
            </div>
        </div>

    <br><br>            

    <h1 align='center'>Facturación</h1> 
    <br><br>
    <input type="button" name="btnPaciente"  id="btnPaciente" value="Agregar 5"/>

    <br><br>
    <select name="selectBox" id="selectBox">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
        <option value="option4">option4</option>    
    </select>

    <br><br>
    <div id="footer" >
        <div id="f1" style="float:left; width: 600px; padding: 0px 60px;">
        Sublime es una plataforma líder en desarrollo web, basada en el sistema "en la nube", que tiene millones de usuarios alrededor del mundo. Ahora es más fácil tener una presencia online profesional.<br><br>
        Promociona tu negocio, exhibe tu arte, configura una tienda online o solo explora nuevas ideas. El creador de páginas web tiene todo lo que necesitas para crear un sitio web totalmente personalizado, gratuito y de alta calidad.
        </div>
        <div id="f2" style="float:left;margin-left:5px;">
            <a href="plantillas.php">Plantillas</a><br><br>
            <a href="facturacion.php">Facturación</a><br><br>
            <a href="iniciar_sesion.php">Iniciar Sesión</a><br><br>
            <a href="registrarse.php">Registrarse</a><br><br>
            <a href="buscador_de_plantillas.php">Buscador de plantillas</a>
        </div>
    </div>

    <script type="text/javascript">
    $(document).on('click','#btnPaciente',function(){
        alert("1");
    });

    $(document).ready(function(){   

        $("#btnPaciente").click(crear);

        function crear(){
            alert("1");
        }

        $("input[btnPaciente]").click(function(){
            alert("2");
        }

        $("#btnPaciente").on("click", function() 
        {
            alert("DD");            

        });
    }); 
    </script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>  
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</body>
</html>

javascript jquery

asked by Jhon Hernández 03.10.2018 в 21:04

source

2 answers

3

A part of the order of the script, as colleagues say, you have an error in the code. of the function that has the alert ("2"):

 $("input[btnPaciente]").click(function(){
        alert("2");
} //aquí hay que cerrar el paréntesis de la fx click

Also, the selector is not correct. The function would look like this:

$("input[name='btnPaciente']").click(function(){
        alert("2");
    })

In this way, they all work.

answered by 14.01.2019 в 21:50

How do I decompose a number in an array in c ++? Error passing data to the Mail method :: send laravel

score 2 · Accepted Answer

Your problem is due to the order in which you are doing things.

On the one hand, in your script, you are using jQuery, but you have not yet defined it, since loading it, you have done it later.

On the other hand, you have the same error with the inclusion of Bootstrap, as you can see in your documentation , it depends on jQuery (so the Bootstrap library needs that jQuery is already defined in order to work correctly)

Anyway, you would have to sort them in the following way

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>      
<script type="text/javascript">
$(document).on('click','#btnPaciente',function(){
    alert("1");
});

$(document).ready(function(){   

    $("#btnPaciente").click(crear);

    function crear(){
        alert("1");
    }

    $("input[btnPaciente]").click(function(){
        alert("2");
    }

    $("#btnPaciente").on("click", function() 
    {
        alert("DD");            

    });
}); 
</script>