removing the div appended using append method - javascript

this is my code...append is working but removing is not working. how to remove the appended div?
<html>
<head>
<script type="text/javascript">
function view(){
$('body').append('<div class="added"><p>something</p></div>');
};
function close(){
$('.added').remove();
} ;
</script>
</head>
<body>
<a onclick="view();">something</a>
<a onclick="close();">close</a>
</body>
</html>

Specify window.close in your html handler:
<a onclick="window.close();">close<a>
http://jsfiddle.net/ZTwd7/1/
Otherwise close() refers to the native close method, which doesn't do anything.
Here's how you would emulate it with a "javascript" (as opposed to inline html attribute) handler:
elem.onclick = function(event) {
with(Window.prototype) {
with(document) {
with(this) {
close();
}
}
}
};
This is not exact reproduction (nor does it work in IE etc, that's not the point) but it would put the .close in Window.prototype in front of the global window.close in the scope, so it shadows it. You can still refer to it explicitly with window.close().
You should also totally drop the above and use jQuery instead:
<a id="view">something<a>
<a id="close">close<a>
JS:
$(function() {
$("#view").click(function() {
$('body').append('<div class="added"><p>something</p></div>');
});
$("#close").click(function() {
$('.added').remove();
});
});​
http://jsfiddle.net/ZTwd7/5/
Making an ajax request that fetches a html file to be appended:
$.get("myhtml.html", function(html) {
$("body").append(html);
}, "html");

Don't know why but by putting another name to close function instead of close() it works
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function view(){
$('body').append('<div class="added"><p>something</p></div>');
};
function close_it(){
$('.added').remove();
} ;
</script>
</head>
<body>
<a onclick="view();">something<a>
<a onclick="close_it();">close<a>
</body></html>

Related

How can I run code in the onload event in a file and in a script tag

I wish to add code to a click event in a file and a script tag. But they seem to conflict. How can I achieve this?
javascript:
window.onload = function()
{
document.getElementById("button3").addEventListener("click", respond3);
}
function respond3(e)
{
alert("Way to go!!");
}
html:
<head>
<title>Second Javascript</title>
<script src="Second.js"></script>
<script>
window.onload = function()
{
document.getElementById("button2").addEventListener("click", respond);
}
function respond(e)
{
alert("getting better");
}
</script>
</head>
<body>
<h1>The quick brown fox jumps over the lazy dogs</h1>
<button onclick='alert("bad practice");'>Inline</button>
<button id='button2'>Script tag</button>
<button id='button3'>Separate file</button>
</body>
Per Quentin's suggestion I changed the script tag to this:
<script>
window.addEventListener('load', AddClick2)
function AddClick2()
{
document.getElementById("button2").addEventListener("click", respond);
}
function respond(e)
{
alert("getting better");
}
</script>
The on* properties can only have one function assigned to them. It's not so much a conflict as you are simply overwriting the first onload function with the second.
While you could do something along the lines of checking to see if there is already a function there, then copying it to a new variable, then calling it from the new variable inside your new onload function … that gets messy.
Use addEventListener instead.
window.addEventListener('load', a_function);
window.addEventListener('load', a_different_function);

Attaching click event won't work

I've wanted to attach click event to an object not yet added to the DOM like here.
I've used a code from the answer but nothing happens when I click anything.
Here's my HTML:
<html>
<head>
<script src="resources/js/components/jquery/jquery-3.1.1.min.js"></script>
<script src="file.js"></script>
</head>
<body>
asl;kdfjl
<div id="my-button">sdgdf</div>
</body>
</html>
JavaScripts are in those location and I can see them in Sources tab in Chrome.
My file.js has content exactly copy-pasted from jsfiddle:
$('body').on('click','a',function(e){
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$('body').on('click','#my-button',function (e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
As your code is in the head tag, you need to use a DOM ready wrapper to ensure your code executes after the DOM has rendered elements.
The jsfiddle doesn't have it because the fiddle is set to run the code onload already.
$(function(){
$('body').on('click','a',function(e){
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$('body').on('click','#my-button',function (e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
});
Your code working with snippet .Better use with document.ready.Post you js after document.ready .And change the selector document instead of body
$(document).ready(function() {
$(document).on('click', 'a', function(e) {
e.preventDefault();
createMyButton();
});
createMyButton = function(data) {
$('a').after('<div id="my-button">test</div>');
};
$(document).on('click', '#my-button', function(e) {
alert("yeahhhh!!! but this doesn't work for me :(");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
asl;kdfjl
<div id="my-button">sdgdf</div>

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()">
place the function clicked(); outside from the document.ready();
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.
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>

Why does this super simple jquery not work?

I'm having hard time getting this snippet to work. I have made a minimal example. You can view it online: http://jsfiddle.net/qnnZe/ where it is working!
test.html
<!DOCTYPE html>
<head>
<title>test</title>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<p>I am going to test right now.</p>
</body>
</html>
test.js
$("p").click(function () {
$(this).hide("slow");
});
However, on my server it does not work. Here is the link to my server: http://techinf.de/sleepytime/test.html
As always, any help appreciated.
Because in jsFiddle your script code is executed after the DOM has loaded (that's the default option, see the dropdown set to "onDomReady"), on your page it's executed before that. It would work if you wrap your code in a ready() handler:
$(function()
{
$("p").click(function () {
$(this).hide("slow");
});
});
You need to wrap your click handler in a document ready function.
Try either:
$(document).ready(function () {
$("p").click(function () {
$(this).hide("slow");
});
});
or
$(function () {
$("p").click(function () {
$(this).hide("slow");
});
});
It will execute before the DOM is ready. Click handlers should be added in any of the normal jQuery "ready" methods, like:
$(function() {
$("p").click(function () {
$(this).hide("slow");
});
});

jquery load() after ajax page is loaded - howto

i have following lines included at the bottom of my index.php:
<script type="text/javascript" language="javascript" src="class/jquery-1.4.3.min.js"> </script>
<script type="text/javascript" language="javascript" src="class/jquery.nivo.slider.pack.js"></script>
<script type='text/javascript' language='javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
problem lies in $(window).load ...
index.php's body is updated onload through ajax call which delivers div#slider upon matching. this makes it nivoSlider() not executing. do you have any trick to make this thing work. i do prefer non-jquery way around it, but at the end of the day anything helps.
many thanks
WEBPAGE IS HERE
Add the call in the callback for the AJAX load.
$('.something').load( 'http://www.example.com/foo', function() {
$(this).find('#slider').nivoSlider();
});
Example using your code (for body):
$(function() { // run on document ready, not window load
$('#content').load( 'page.php?c=2&limit=5', function() {
$(this).find('#slider').nivoSlider();
});
});
For link:
<!-- updates links like so -->
<a class='nav' href='page.php?category=art&limit=5&c=1'>art</a>
// in the same document ready function
$('a.nav').click( function() {
var $link = $(this);
$('#content').load( $link.attr('href'), function() {
$(this).find('#slider').nivoSlider();
$link.addClass('selected'); // instead of setting bg directly to #828282;
});
return false; // to prevent normal link behavior
});
Would you not want to use $(document) rather than $(window)?
$(window).load(function() {
$('#slider').nivoSlider();
});
or shorthand
$(function() {
$('#slider').nivoSlider();
});

Categories

Resources