When I click a button "click Me" on my page. I want to know that the button is clicked and an alert should pop up saying hi.Here is my code which is not working.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(this).data('clicked', true);
});
if($('#btn').data('clicked')) {
alert("HI");
}
});
</script>
</head>
<body>
<input id="btn" value="Click Me" type="button"></input>
</body>
</html>
Move the alert to inside the handler:
$("#btn").click(function(){
$(this).data('clicked', true);
if($(this).data('clicked')) {
alert("HI");
}
});
That if statement doesn't automatically run (well it does on page load since it's in your DOM ready event) - it has to be within an event.
You could drop the if statement at all.
It's key to put your alert() call in the click Callback function.
$(document).ready(function(){
$("#btn").click(function(){
alert("HI");
});
});
Related
i run code below , click open 5 times and click close 4 times then click alert.
i expected that alert function run 1 times but it run 5 times why? , how to prevent this problem?
code contains 3 buttons that by click open ,shows two buttons including close and alert button and by click close hides alert and close button and by click alert,alerts 1.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".close-but").css("display","none");
$(".alert").css("display","none");
$(".open-but").click(function(){
$(".alert").click(function(){
alert("1");
});
$(".open-but").css("display","none");
$(".close-but").css("display","flex");
$(".alert").css("display","flex");
});
$(".close-but").click(function(){
$(".close-but").css("display","none");
$(".alert").css("display","none");
$(".open-but").css("display","flex");
});
});
</script>
</head>
<body>
<button class="open-but">open</button>
<button class="close-but">close</button>
<br/>
<button class="alert">alert</button>
</body>
</html>
You have misplaced $(".alert").click()
Every time you hit .open-but it assigns an event handler for alert button. You should assign $(".alert").click() once only. So place this outside of $(".open-but").click() as below:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".close-but").css("display", "none");
$(".alert").css("display", "none");
$(".open-but").click(function() {
$(".open-but").css("display", "none");
$(".close-but").css("display", "flex");
$(".alert").css("display", "flex");
});
$(".close-but").click(function() {
$(".close-but").css("display", "none");
$(".alert").css("display", "none");
$(".open-but").css("display", "flex");
});
$(".alert").click(function() {
alert("1");
});
});
</script>
</head>
<body>
<button class="open-but">open</button>
<button class="close-but">close</button>
<br />
<button class="alert">alert</button>
</body>
</html>
I have a button that am binding to click event like the code below:
jQuery(function(){
$("#btnSubmit").on("click", function(){
//code here
})}
When I click the button in browser, it doesn't execute my code. But when I open developer tools and type: $("#btnSubmit")[0].click(), it executes my code.
Any guidance would be helpful.
Could you try this code?
jQuery(function(){
$("#btnSubmit").on("click", function(){
console.log("hello");
});
});
Remember that in your html you need a button like this one
<button id="btnSubmit"></button>
HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-default" id="btnSubmit">Submit</button>
</body>
JS:
$(document).ready(function() {
$("#btnSubmit").click(function() {
alert("hello");
});
});
Working JSFiddle:
https://jsfiddle.net/codeforwin/yj9m6mLv/
Try this:
$("#btnSubmit").click(function(){
//do stuff here
});
why blur event in the below code is not working and the alert box pop-ups as soon as the document is ready and not wait for blur event. give me suggestion to fix it... Thanks...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("[type=text]").blur(cc("[type=text]"));
$("[type=email]").blur(cc("[type=email]"));
function cc(s){
alert("Value: " + $(s).val());
}
});
</script>
</head>
<body>
<input type="text" id="test" value="rev"><br>
<input type="email" id="test" value="mail#example.org">
</body>
</html>
blur() function take function as a parameter. In your code you pas result of cc function execution.
You should use anonymous functions:
$(document).ready(function(){
$("[type=text]").blur(function() { cc("[type=text]"); });
$("[type=email]").blur(function() { cc("[type=email]"); });
function cc(s){
alert("Value: " + $(s).val());
}
});
I have the following code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2' onclick="ClickBack();">Click me </span>
</body>
<script>
$(".click2").click(function (event) {
if(confirm("Sure to continue"))
event.stopImediatePropagation();
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</html>
My requirement is to call ClickBack() only when its being confirmed by , and i cannot make any change in ClickBack function , Its ony one case,
main thing is
I have to add this click2 to a number of elements, and it will basically call the inline events only after confirmation by click2
$(".click2").click(function (event)
I am getting two issue,
ClickBack is being fired firstly,
TypeError: event.stopImediatePropagation is not a function it was type mistake thanks to #manwal its solved
How can I achieve my goal.
I cannot make any change in ClickBack() function
Please advise
Thanks
You have typo issue, use this line there should be double m:
event.stopImmediatePropagation()
instead of
event.stopImediatePropagation()
^
for this ClickBack is being fired firstly, problem the solution is remove onclick="ClickBack();" from
<span class='click2' onclick="ClickBack();">Click me </span>
First of all if you bind inline onclick function it will be trigerred first.
So instead of adding it inline do it in your script like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2'>Click me </span>FD
<script>
$(".click2").click(function (event) {
if (confirm("Sure to call ClickBack"))
{
ClickBack();
}
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</body>
</html>
Remove onclick event handler from span
<span class='click2'>Click me </span>
and call the ClickBack function in on click event handler for .click2 class as follows,
<script>
$(".click2").click(function (event) {
if(confirm("Sure to call ClickBack"))
ClickBack();
});
function ClickBack() {
alert('yes I am click1');
}
</script>
Try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<span class='click2'>Click me </span>FD
<script>
$(".click2").click(function (event) {
if (confirm("Sure to call ClickBack"))
{
ClickBack();
}
});
function ClickBack() {
alert('yes I am click1');
}
</script>
</body>
</html>
Consider the HTML :
<html>
<head>
Something...
</head>
<body>
<script>
$('#btnviewdetails').text('Save').button("refresh");
</script>
<button id='btnviewdetails' type='button'>SET</button>
</body>
</html>
When I hit the button , the JS code is not invoked . What am I doing wrong ?
Thanks
You need to bind an event handler on the button. The function will be invoked when the button is pressed.
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
Complete code :
<html>
<head>
<script src="jquery-2.1.0.min.js"></script>
Something...
</head>
<body>
<button id='btnviewdetails' type='button'>SET</button>
<script>
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
</script>
</body>
</html>