JavaScript firing on page load instead of event (Bug) - javascript

I'm having the strangest issue when I'm calling in functions on an event. I'm trying to get a function to run when the window is resized using $(window).resize() but it seems to fire the function as soon as the DOM loads then never again.
I'm probably missing something really simple here but I've been looking at it all day and I need a bit of outside help.
I've created a watered down version on JSfiddle that does the same thing but using $('a').click() instead of $(window).resize() so it's a bit easier to test. As the same issue is cropping up I have a feeling there's something wrong with my function but I just can't see it.
Link is here http://jsfiddle.net/sambeckhamdesign/APLZ2/1/

Try:
$('a').click(function(){
alert('hello');
}, imageResizer());​

You are running the function and sending it's output into the jQuery thingy as a parameter:
$('a').click(alert('hello'), imageResizer());
instead, try this:
$('a').click(function() {alert('hello'); imageResizer(); });
This provides an anonyomous function, which will be run when the item is clicked, calling imageResizer(), whereas the way you had it, it ran the imageResizer() function and put it's return value into the onclick handler. The reason it didn't work later on was because it would have been treating whatever the return value of the imageResizer() function was as code that it was trying to run.

You are triggering the event instead of assigning an handler to it
$('a').click(alert('hello'), imageResizer());​
Should be
$('a').click(function(event) {
event.preventDefault(); // I suppose you will want that ... it will avoid your window jumping to the top when you click due to the href="#"
alert('hello');
imageResizer();
});​

Related

Event handler does not fire with .on(), but works with .delegate()

I'm using a Bootstrap Modal dialog, and I have an event handler set up so that once the modal closes, it triggers a couple of other updates on the page. I had been using the .delegate method which works perfectly. After reading that it was deprecated, I tried to move to the .on method, however the handler was not getting triggered. I cannot figure out why. Here are my two code snippets for comparison:
Delegate:
$(document).delegate('#streamingPopup', 'hide.bs.modal', function () { ... });
On:
$('#streamingPopup').on('hide.bs.modal', function () { ... });
No code withing the callback function has changed.
As far as I can tell, I'm using it the way the documentation says it should be used (http://api.jquery.com/on/). I'm assuming it has something to do with the hide.bs.modal event, or with the fact that it's attached directly to the jQuery object rather than the DOM itself, but I can't work out why it would work in one but not the other. Can anyone point me to what I'm doing wrong?
You might need to change the syntax for .on:
$(document).on('hide.bs.modal', '#streamingPopup', function () { ... });
This must work, as it targets a static parent. Replace the document with a static parent of #streamingPopup.

Jquery Onclick functionality not working for div, as specific loaded after sometime

For <div class="editdiv">Test</div>. Jquery click functionality is added in document.ready function . But editdiv loading in page dynamically with delay.
So when I click on the div. Function is not calling. By using timeout function is working fine.
I need a different approach to solve this functionality.
If your .editdiv is loaded dynamically after your js loading so your click event can't detect it and it will not work, instead you should use event delegation on() to deal with fresh DOM :
$('body').on('click', '.editdiv', function(){
//Your click event code
})
If you want to avoid setTimeout you could use delay with queue callback method :
$('div.scroll-area-blue')
.delay(5000)
.queue(function() {
$(this).enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
});
If you will use setTimeout better to use it like :
setTimeout( enscrollDiv, 5000);
function enscrollDiv(){
$('div.scroll-area-blue').enscroll({
showOnHover: false,
verticalScrolling: true,
verticalTrackClass: 'vertical-track-blue',
verticalHandleClass: 'vertical-handle-blue'
});
}
Hope this helps.
It is really difficult to understand whats going wrong from your question. What I guess is you are loading a specific div using Ajax or similar technologies - meaning the div is not available initially.
The way jQuery works is that, it only binds the event to the elements only available at the time the part is executed.
If a <div id='myDiv'></div> is not present when $('#myDiv').click(function(){}) is called, it won't work.
One workaround is to do it like this:
$('body').on('click','#myDiv',function(){});
This registers the click on body and then checks if the clicked element is having a id 'myDiv' or not. We can expect the <body></body> to be present always. So the problem we had with previous code won't happen here.
maybe you're loading the javascript codes before the html elements(tags) are loaded.
try adding the script which includes "document.ready()" before the end tag of the body when all html tags have already finished loading.
I'm hitting targets in the dark. Hope it works for you. It's difficult to generate any solution without analyzing the problematic code......

Function keeps running although it shoudn't

I wrote a on ended for video player, like this:
$('.vast').on('ended', function() {
$('.vast').removeClass('vast');
Player.constructPlayer(
'//techslides.com/demos/sample-videos/small.mp4',
'//techslides.com/demos/sample-videos/small.webm'
);
});
My problem is, even when I remove the vast class, it's still running in loop. What can I do?
The event has nothing to do with the class you used to bind it. You need to remove the event handler itself.
$(this).off('ended');

Event handlers not working correctly in jsfiddle

Trying to make a jsfiddle so I can post it on here and get some help with a problem; however, I'm having a problem getting jsfiddle to act as expected, so I'm having a problem trying to document my problem!
http://jsfiddle.net/eidsonator/he4Vc/#base
I'm trying to add a blur event handler to a input with id of "part". My alert fires as soon as the page loads (which it shouldn't) and doesn't fire when focus is lost. This behavior persists in chrome and in firefox (I'm coding for an internal web app, so I can ignore ie!)
$("#part").on('blur', alert('lost focus'));
I've changed the load method, and tried wrapping it in my own $(document).ready(function() {}); as well as using .blur() and different versions of javacript... any clues?
Thanks!
You are calling alert straight away, and passing the return value of it to the .on() method. Instead, you need to pass a reference to a function that can be invoked when the event is received:
$("#part").on('blur', function () {
alert('lost focus')
});
Here's an updated fiddle.
you have written a wrong syntax .see the docs for more info,and change your code to
$("#part").on('blur', function(){
//do something
});

Run a script when div is inserted

I have a script that does graphing, using jqplot. It works fine when the document is loaded rendering each graph using jquery's .each method. However, the problem lies when I replace the div with another one when a bar is clicked. It is suppose to render another graph in the position of the old graph. It changes the graph but does not execute the script.
The script that loads the items has this function to change all divs to graphs:
$("div.barchart").each(function(){
barChart($(this).attr("id"),$(this).attr("data-xmlurl"));
});
is there another way to do this so that it would work when a div is changed too?
Update:
Rails generates a script that is ran. However, it doesn't seem to work when I have this:
chart$=$("#<%=params[:chart_id]%>");
chart$.replaceWith("<%=escape_javascript(render :partial=>"chart_partial"}%>");
barChart(chart$.get(0).attr("id"),chart$.get(0).attr("data-xmlurl"));
Note:
For reference, the actual source code can be found in the jquery_cheats project
Perhaps you could add a listener on the parent element? Is it OK if the barChart() function gets called more than once?
Maybe something like this:
$("div.barchart").parent().on("DOMSubtreeModified", function(e) {
// (or maybe use DOMNodeInserted event instead)
$("div.barchart[id][data-xmlurl]").each(function() {
barChart($(this).attr("id"),$(this).attr("data-xmlurl"));
});
});
You can check out my jsFiddle for this here.
On the current application I'm working on, I'm stuck with version 1.5.2. To get around this, I would unbind and rebind my event and load the initialization in both "ajaxComplete" and "ready". I wasn't able to get the DOM to automatically rebind the event. Delegate is suppose to work like "on", but in my instance I still had to use the below logic.
In short, it would look something like this.
$(document).ready(function () {
InitSomethingCool();
});
$(document).ajaxComplete(function() {
InitSomethingCool();
});
function InitSomethingCool(){
$(".something").unbind('click').click(function(e) {
//Unbind and rebind click event.
alert('You clicked me!');
});
}
Reference:
http://api.jquery.com/on/
http://api.jquery.com/delegate/

Categories