I need to fire the script when elements are loaded via ajax and appended to the DOM.
here is HTML
<div id="one">
<p>one</p>
<button>Append</button>
</div>
and here is javascript
$('button').on('click', function(){
//in real life s is loaded via ajax
var s="<p onload='myalert();'>two</p>";
$('#one').append(s);
})
function myalert() {
alert('ok');
}
The alert will never fire. How to catch the event when elements are fully loaded?
Here is codepen sandbox for playing around: https://codepen.io/xguntis/pen/rQERmW
You can't use the onload event there. Why not just have the alert statement at the end of your event handler?
$('button').on('click', function(){
//in real life s is loaded via ajax
var s="<p>two</p>";
$('#one').append(s);
alert('ok');
})
try this..
$('button').on('click', function(){
//in real life s is loaded via ajax
var s="<p id='twoP' >two</p>";
$('#one').append(s).ready(function(){
alert('ok');
});
})
this will load the element then will fire the call back
I tried to fix your issue.
So I found a way to fix your problem.
This is my code
$('button').on('click', function(){
//in real life s is loaded via ajax
var s="<p>two</p>";
$('#one').append(s).ready(function(){
alert('ok');
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div id="one">
<p>one</p>
<button>Append</button>
</div>
Related
my on windows.load function not working in document.ready
$(document).ready(function(){
//this is for nimation
$(".progress-bar-fill").css({"width":"100%","transition":"5s"});
// my this function is not working
$(window).load(function() {
$(".overlay").fadeOut();
});
});
Your code says:
Load the document
When the DOM is loaded, register a new hook to listen on when the window is loaded (images etc.) which will start the animation
However, by the time your window load registration happens, the window might already be loaded.
You also use the incorrect method to subscribe to the window loaded event.
Try:
$(document).ready(function(){
//this is for nimation
$(".progress-bar-fill").css({"width":"100%","transition":"5s"});
});
$(window).on("load", function() {
$(".overlay").fadeOut();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="progress-bar-fill">progress bar</div>
<div class="overlay">overlay</div>
I am new to Javascript and I am wondering on the behavior below.
Consider the working code below:
<div><br/><strong>Click Me!</strong></div>
<script>
$(document).ready(function(){
$('div').mouseenter(function(){
$(this).fadeTo('fast',1);
});
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
});
</script>
But this one does not work:
<div onmouseover="fade()"><br/><strong>Click Me!</strong></div>
<script>
$(document).ready(function(){
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
});
function fade(){
$(this).fadeTo('fast',1);
}
</script>
Why is the second one not working when all I did was use inline eventhandler and function?
Thanks in advance!
First, I wouldn't do this. Switching from using modern event handling to onXyz attributes is a bit backward. See below the fold for more.
But answering the question of why it didn't work: this within the call to fade in your second example is not the div (it's the global object, aka window on browsers). You'd have to change your onmouseover to:
onmouseover="fade.call(this)"
...for this to be the div during the call.
(Separately, note that you used onmouseover in the second code block but mouseenter in your first code block. I've left it as onmouseover, but you probably wanted onmouseneter instead.)
Example:
$(document).ready(function(){
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
});
function fade(){
$(this).fadeTo('fast',1);
}
<div onmouseover="fade.call(this)"><br/><strong>Click Me!</strong></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Or alternately, just pass this in as an argument and change fade to use it:
$(document).ready(function(){
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
});
function fade(element){
$(element).fadeTo('fast',1);
}
<div onmouseover="fade(this)"><br/><strong>Click Me!</strong></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
But again, I wouldn't use an onXyz attribute; if you don't want the handlers in a ready callback, they don't need to be, but that doesn't mean you have to switch to using attributes for event hookup. Instead:
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
$('div').mouseenter(function(){
$(this).fadeTo('fast',1);
});
Example:
$('div').mouseleave(function(){
$(this).fadeTo('fast',0.5);
});
$('div').mouseenter(function(){
$(this).fadeTo('fast',1);
});
<div><br/><strong>Click Me!</strong></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
You use document.ready because you don't know if the nodes you're trying to effect have been rendered yet.
Scripts are executed in-order on the page. So if you have more divs below your script definition they're not going to match in $("div").
Since scripts are typically included in the header, you totally need document.ready if you want JavaScript to see all the nodes initially.
In your example you don't need document.ready per se. The error is elsewhere.
<div>1</div>
<script>
console.log($("div").length); // 1
$(document).ready(function () {
console.log($("div").length); // 2
});
</script>
<div>2</div>
So i want to execute code when i click on a div.
So I have a function
function froth(){$("#area").load("test.html #enquiry1");}
I want to call this function when I click a div
<div id="t1">Test</div>
So I try and use this code
$('#t1').click(function(){
froth();
});
Nope it doesnt work.
BUT
I go to the HTML document and do this
<div id="t1" onclick="froth()">Test</div>
AND IT works perfectly.
So my question is, what am i doing wrong here? Why would it work when in the html doc and not work when i try and make it clickable with jquery?
The main issue is that you need to bind your click event after the rest of the DOM has loaded
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
});
});
You can see a live example here
$(document).on('click', '#t1', function() {
froth();
});
I am trying to change the background image of a link when it get clicked. I keep getting the error that you cannot call 'click' on null.
JQuery (in the header)
<script type="text/javascript">
$('a.upvote-arrow').click(function(){
$('#tempid1').css('background-image','url(../images/icons/up-arrow2.png)');
});
</script>
HTML
<div class="top-comment-vote">
</div>
Thanks
Try adding $(document).ready:
<script type="text/javascript">
$(document).ready(function(){
$('a.upvote-arrow').click(function(){
$(this).css('background-image','url(../images/icons/up-arrow2.png)');
});
})
</script>
Are you sure this script is being loaded after the html is in the DOM?
Try wrapping what you wrote in a onload closure.
$(function() {
$('a.upvote-arrow').click(function(){
$('#tempid1').css('background-image','url(../images/icons/up-arrow2.png)');
});
});
Another thing you can do is take advantage of delegation for the event registration.
$('body').on("click", ".a.upvote-arrow", function(){
$('#tempid1').css('background-image','url(../images/icons/up-arrow2.png)');
});
This binds it to the body instead.
Try wrapping your script with document.ready; I suspect that you're script might be running before your entire page loads.
my question is a short one but I couldn't figure it out by myself. I've got a function like -> http://jsfiddle.net/gtU56/ . I'm calling a javascript-function with an event-listener(onclick) in my html-code. The function itself is more complex but I need the last snippet. By clicking 'Show More' the text should change. Why won't the text change?
Because the toggleText function isn't available when the html code is rendered.
In other words the function isn't set until the page is ready so the onclick function doesn't reference anything.
Either have the function like here http://jsfiddle.net/gtU56/2/
or have it in the head of the page because its needs to be ready immediately
If you want it to wait for the ready state you can do the following and remove the onclick action all together
http://jsfiddle.net/gtU56/7/
$(".text").click(function()
{
$(".text").toggle();
});
toggleText = function () {
$('.text').toggle();
}
check here http://jsfiddle.net/gtU56/3/
It's because of how you're loading the function. Switch it from onLoad to no wrap (head) and it works fine.
jsFiddle example
Using jsFiddle's onLoad wraps your function in a window.onload call like this:
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
function toggleText() {
$('.text').toggle();
}
});//]]>
</script>
While no wrap (head) just adds it normally like this:
<script type="text/javascript">
//<![CDATA[
function toggleText() {
$('.text').toggle();
}
//]]>
</script>
since you are already claiming having jquery, you need not use inline javascript. try this
var elems = $('.text');
elems.click(function(){
elems.toggle();
});
fiddle : http://jsfiddle.net/gtU56/5/
$('.text').click(function() {
$('.text').toggle('slow', function() {
// do your animation..
});
});
Js Fiddle
This is the solution - http://jsfiddle.net/gtU56/6/
You need to first make sure that the function is registered after page load. Then, bind a click event to the div.
Hope this helps!
First you should organize you jQuery code like this:
$.(document).ready(function() {
// enter jQuery code here
});
Otherwise you're accessing a not completly loaded html document.
Also, you don't need the event-listener if you are using jQuery.
This should work for you:
$.(document).ready(function() {
$('.text').click(function() {
$(this).toggle();
});
});
Is very easy. You can use ID or CLASS.
onclick="$('NAME ID or CLASS').toggle(ANIMATION or DURATION);"
<div>
<div class="text" onclick="$('.text2').toggle(400);">Show More</div>
<div class="text2" style="display:none">Show Less</div>
</div>