sshanzel
sshanzel

Reputation: 379

JQuery working on .html but not on .php

I really thought at first that my code is not working.. but then i tried to create a very simple click event in a clean page and my jquery works on .html but when i open the .php on my XAMPP server it does nothing when it's clicked but it alerts the first one.

index.php

<html>

<head>

    <script src="js/jquery-3.2.0.min.js"></script>

</head>
<body>

<?php include "includes/widgets/login.php"; ?>

</body>
</html>

login.php

<script type="text/javascript">
$(document).ready(function() {
    alert("Something");
    t = clicked();
    $('#login').click(function() {
        alert("Login Alert!");
    });
    function clicked() {
        alert("I was clicked!");
    }
});
</script>

<input type="button" value="Login" id="login" onclick="clicked()">

Upvotes: 0

Views: 207

Answers (3)

Therichpost
Therichpost

Reputation: 1815

Place your function like this:

<script type="text/javascript">
$(document).ready(function() {
alert("Something");
t = clicked();
$('#login').click(function() {
    alert("Login Alert!");
});

});
 function clicked() {
    alert("I was clicked!");
}
</script>

Upvotes: 1

Naitik Kundalia
Naitik Kundalia

Reputation: 309

Change login code to following and it will work.

<script type="text/javascript">
$(document).ready(function() {
    alert("Something");

    t = clicked();
    $('#login').click(function() {
        alert("Login Alert!");
    });
});
function clicked() {
    alert("I was clicked!");
}
</script>

<input type="button" value="Login" id="login" onclick="clicked()">

Uncaught ReferenceError: clicked is not defined at HTMLInputElement.onclick (index.php:22)

This problem will also solved. I don't know properly but i thought that browser can't find function inside jquery.

JQuery create function when DOM is ready.But Control onclick property was read by browser while creating a page but they can't find the function becuse it was not ready yet

So I think procedure may be like :

1) Browser read the page and find the function.

2) JQuery ready event will fire.

Upvotes: 1

ampedo
ampedo

Reputation: 253

place the function clicked(); outside from the document.ready();

Upvotes: 2

Related Questions