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>
Related
When I have this code:
$('input[type="checkbox"]').click(function(){
alert('2');
})
It works great, every time when I click a checkbox, I get an alert.
$('input[type="checkbox"]').click(function(){
alert('2');
$("#fresh-table").bootstrapTable("refreshOptions", {
detailView: false,
});
})
When I add the following, it works also great, but the alert works only one time.
How do I fix this?
EDIT
Used the function onColomnSwitch to fire the event multiple times.
Fixed, tnx!
Please check that you have included the js file for "BootStrapTable" or not. If not included then it will show an error in the console.
I have checked the code and it's working for me. You can try out this code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
alert('2');
$("#fresh-table").bootstrapTable("refreshOptions", {
detailView: false,
});
})
});
</script>
</head>
<body>
<input type="checkbox" name="test_cb" id="test_cb"> <label for="test_cb">Test Checkbox</label>
<table border="1px solid black" id="#fresh-table">
<tr><th>Name</th><td>Lorem Ipsum</td></tr>
<tr><th>Email</th><td>example#gmail.com</td></tr>
</table>
</body>
</html>
I would like to get value on click event from dynamically added elements but something goes wrong.
My code is:
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#myContainer").append("<div class='remove' value='myValue'>click to display value</div>");
});
$(document).on("click", ".remove" , function() {
alert($(this).val());
});
});
</script>
</head>
<body>
<button>Add new list item</button>
<div id="myContainer">
</div>
</body>
</html>
When I am clicking on the created dynamically div there is empty alert insted of myValue.
What should I change?
Try
$(document).on("click", ".remove" , function() {
alert($(this).attr('value'));
});
Instead of
$(document).on("click", ".remove" , function() {
alert($(this).val());
});
this should work for you. ↓↓
$(document).ready(function(){
$("button").click(function(){
$("#myContainer").append("<div class='remove' value='myValue'>click to display value</div>");
});
$(document).on("click", ".remove" , function() {
alert($(this).attr('value'));
});
});
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<button>Add new list item</button>
<div id="myContainer"> </div>
</body>
</html>
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");
});
});
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>
The site like this:
`--main.html
`--dialog.html
`--folder
`--iframe.html
and the code is here:
main.html:
<html>
<head>
<script type="text/javascript">
function testframe() {
var doc = document.getElementById("frame").contentWindow;
doc.show();
}
</script>
</head>
<body>
<iframe src="folder/iframe.html" id="frame"></iframe>
<br/>
<button onclick="testframe()">test</button>
</body>
</html>
dialog.html:
<html>
<head>
</head>
<body>
This is modal dialog!
</body>
</html>
iframe.html:
<html>
<head>
<script type="text/javascript">
function show() {
showModalDialog('../dialog.html');
}
</script>
</head>
<body>
this is ifram
<br />
<button onclick="show()">show dialog</button>
</body>
</html>
When I click the show dialog button in the ifram,it show the modal dialog correctly.
When I click the test button outside the ifram ,it show the modal dialog incorrectly.
How can I fix this when I click the test button outside the ifram to show the correct page in the dilog?
iframeDomElement.contentWindow.setTimeout(function() {
iframeDomElement.contentWindow.childFunc();
}, 0);
This hack will make the relative path relative to the child window. Works in firefox and chrome，but not in safari.