What is diffrent between these syntax please Explain in details?
$(document).on("click", "#index1", function() {
$(p).hide();
});
$("#index2").on("click", "#index1", function() {
$(p).hide();
});
$("#index1").on("click", function() {
$(p).hide();
});
In first case you add click listener to "document", but it be executed only if you click at "#index1".
In second - you add listener to "index2" and it will be executed only if you click at "#index1" located inside of "#index2".
In the third case you just add listener to "index1"
Lets imagine a webpage at first.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id='index1'>click me</button>
</body>
</html>
This will work
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id='index1'>click me</button>
<script type="text/javascript">
$("#index1").on("click", function () {
$(p).hide();
});
</script>
</body>
</html>
This won't work, because the element did not exist while the script was executed.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
$("#index1").on("click", function () {
$(p).hide();
});
</script>
<button id='index1'>click me</button>
</body>
</html>
But with a workaround, it would
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
$(document).on("click", "#index1", function() {
$(p).hide();
});
</script>
<button id='index1'>click me</button>
</body>
</html>
This says whenever a click event is fired on the document check if the click was fired on #index1 element. So even if, the element did not exist the callback, is attached to the document node. Now whenever a click is fired on the document it will check if it originated from #index1
Related
I was learning javascript and experimenting with mouse events. In this code I am trying to manipulate the element when I put the mouse over it with the help of an alert box. However the problem is that the alert box is shown even when the mouse is not over the element.
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k">as</p>
<script type="text/javascript">
document.getElementById("k").onmouseover=alert('Hello');
</script>
</body>
</html>
The property onmouseover expect that you assing a function to it, instead you are assigning the evaluation of an expression, in this case: alert("hello"). So when the document loads, it evaluate that expression and the alert is shown, then a null value is assigned to the onmouseover property, that is the reason the alert only shows once.
For your goal, you can use an anonymous function to wrap the alert and assing it to the property. Check the next example:
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k" style="border: 1px solid red">as</p>
<script type="text/javascript">
document.getElementById("k").onmouseover = function() {alert('Hello')};
</script>
</body>
</html>
You need to put it in a function like so.
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k">as</p>
<script type="text/javascript">
document.getElementById("k").onmouseover = function(){alert('Hello')};
</script>
</body>
</html>
try to add onmouseover="mouseover()" in <p>
function mouseover() {
alert('Hello');
}
<!DOCTYPE html>
<html>
<head>
<title>testing</title>
</head>
<body>
<a>dasdasd</a>
<p id="k" onmouseover="mouseover()">as</p>
<script type="text/javascript">
function mouseover() {
alert('Hello');
}
</script>
</body>
</html>
The issue is, the () after the alert function causes the function invocation on page load and you see the alert. Call the function inside of an anonymous function which will ensure that the function will be called only when the event (onmouseover) is fired:
document.getElementById("k").onmouseover = function(){alert('Hello')};
<a>dasdasd</a>
<p id="k">as</p>
Try this (with JQuery):
$(document).ready(function(){
$("p").mouseover(function(){
alert("Hello");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>
How do I use a alert to stop a link from going to the page? I've been trying to figure it out but it's sending me to the link anyways
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node) {
return confirm("STOP CLICKING THE LINK");
}
</script>
Don't click link
</body>
</html>
Just return false from the confirm_alert function.
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node) {
confirm("STOP CLICKING THE LINK");
return false;
}
</script>
Don't click link
</body>
</html>
You can pass the param event and execute the function .preventDefault()
<!DOCTYPE HTML>
<html>
<head>
<title>Do Not Click</title>
<meta charset="UTF-8" />
</head>
<body>
<script type="text/javascript">
function confirm_alert(node, e) {
e.preventDefault();
return confirm("STOP CLICKING THE LINK");
}
</script>
Don't click link
</body>
</html>
A better approach is binding the event click:
document.querySelector('a').addEventListener('click', confirm_alert);
function confirm_alert(e) {
e.preventDefault();
return confirm("STOP CLICKING THE LINK");
}
Don't click link
Put the redirect in the js function. Put a check in it for showing the alert or for going to the url.
Something like this:
window.location.href = "http://stackoverflow.com";
Not sure tho. Not tested it.
How can I pass argument to function redirect in JavaScript
Here is my code:
<script type="text/javascript">
<!--
function redirectlink(text){
window.location = "index.php?keyName="+ text;
}
//-->
</script>
<form>
<button type="button" id="butt_1" onclick="redirectlink(KEY_POWER)"> 1 </button>
Thank you in advance.
This can be done either by using getElementById and addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo">Click</button>
<script type="text/javascript">
document.getElementById("foo").addEventListener("click", function(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
})
</script>
</body>
</html>
either onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo" onclick="action()">Click</button>
<script type="text/javascript">
function action(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
}
</script>
</body>
</html>
Using onclick is deprecated.
With just only JavaScript (without jQuery / Angular etc.) you can use addEventListener on click event.
for example:
var btn = document.getElementById('butt_1');
btn.addEventListener('click', function(e) {
// your code
});
In this function you can for example get value/txt from this button element and something else which you want.
When having the following HTML page (index.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
console.log("iframe loaded");
});
});
</script>
</body>
</html>
and the following iframe.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
the console output will look like:
However, the log "iframe loaded" is missing. It seems that .on("load") is not getting fired on the iframe.
Does anyone know why?
Edit:
Of course I am having JavaScript activated (otherwise I wouldn't see any log messages)
I can not edit iframe.html so using postMessage etc. is not a workaround for me
I have tested this in the latest FF (47.0a2) and Chrome (49)
The Code is working perfectly . Maybe the path that you provided for iframe is wrong. Check if they are in the same folder
Check if javascript is enabled in your browser
Edit:
or try to replace your index.html code with:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
<script type="text/javascript">
function handleOnLoad(el) {
// el is the actual iframe
console.log("iframe loaded");
}
</script>
</head>
<body>
<iframe src="iframe.html" onload="handleOnLoad(this)"></iframe>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
// console.log("iframe loaded");
});
});
</script>
</body>
</html>
Your code <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$("iframe").on("load", function(){
console.log("iframe loaded");
});
});
</script>
has to be inside iframe.html
So your pages look like below post modifications.
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function(){
console.log("document ready");
$(window).on("load", function(){
console.log("iframe loaded");
});
});
</script>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
I am trying to access content inside a html file that I loaded into a div using jquery.load.
My index page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
</div>
</body>
</html>
My script so far looks like this:
$(document).ready(function() {
$("#content").load("content.html");
$("#content").click(function(){
alert($(this).attr("id"));
});
});
The content.html page:
<!DOCTYPE html>
<html >
<head>
<title></title>
</head>
<body>
<h1 id="header1">
Content
</h1>
<p>
This is a paragraph
</p>
<p>
This is another paragraph
</p>
</body>
</html>
So what I want to happen is:
When I click on the tag in the content div it should display that tag's id - namely "header1", but currently its just displaying "content". How can I achieve this?
Thank you in advance
Bind the event handler to every element in content.
$(document).ready(function() {
$("#content").load("content.html");
$("#content, #content *").click(function(e){
alert(this.id);
e.stopPropagation();
});
});
Or let the events propogate:
$(document).ready(function() {
$("#content").load("content.html");
$("#content").click(function(e){
alert(e.target.id); //may return undefined if no id is assigned.
});
});
Working Example: http://jsfiddle.net/5JmsP/