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/
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>
<!DOCTYPE html>
<html>
<head>
<title>JavaScript and the DOM</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 id="myHeading">JavaScript and the DOM</h1>
<p>Making a web page interactive</p>
<script src="app.js"></script>
</body>
</html>
This is my html code and the js I have written is here
const myHeading = document.getElementById('myHeading');
myHeading.addEventListener('click', () => {
myHeading.style.color='blue';
});
It is very simple however for some reason the h1 tag does not seem to be turning blue on click event?
Maybe your dom is not ready when js executed. Try this
document.addEventListener("DOMContentLoaded", function() {
// your code
})
Please suggest me how I show the loader in-between button click function to background image fully loading time.
Thanks
<html >
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('button').click(function() {
//want a loader till the background images loads
$('#load').show();
$('#mybody').css('background-image', 'url(http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg)');
//hide loader after the background images loads
$('#load').hide();
});
});
</script>
</head>
<body id="mybody" >
<button >Hello</button>
<div style="display:none" id='load'>loading......</div>
</body>
</html>
If you want to show the #load div until window is fully loaded, then you can use this following code. Also you placed jQuery library file wrong.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{background-image: url(http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg);}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(window).load(function() {
$('#load').hide();
});
</script>
</head>
<body>
<div id='load'>loading......</div>
</body>
</html>
It is working
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
</body>
</html>
But when i move
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
Before <body> tag is it is not working, because i want Put JavaScript at bottom, but i can't put document.ready part after jquery library, what will be solution.
One: your code MUST come after the jquery library.
Two: If your moving the code to the bottom of the page, you don't need $(document).ready(....
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("button").click(function(){
$("p").slideToggle();
});
</script>
</body>
</html>
If you absolutely must have your page specific code above the jquery library, you'll likely need a queue system so that when jquery is available, the queue will be processed. Below is an example
<!DOCTYPE html>
<html>
<head>
<!-- this would need to be part of the CMS header -->
<script>
window.initQueue = [];
</script>
<!-- here's your page specific js -->
<script>
window.initQueue.push(function(){
$("button").click(function() {
$("p").slideToggle();
});
})
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
<!-- cms footer -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$.each(window.initQueue,function(i,fn){
fn();
})
</script>
</body>
</html>
<script>
window.onload = function() {
$("button").click(function() {
$("p").slideToggle();
});
}
</script>
why does message box not appear? Many thanks.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.8.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('<script>alert("hi");</' + 'script>').appendTo(document.body);
</script>
</head>
<body>
<span>my test</span>
</body>
</html>
You must wrap in in a $(document).ready.
Otherwise it won't be able to find body because it hasn't loaded yet.
$(document).ready(function() {
$('<script>alert("hi");</' + 'script>').appendTo(document.body);
})