.click() doesn't work with (document).ready() - javascript

My jQuery('a[data-filter=".hottop"]').click(); doesn't work together with my document.ready function. The click works fine when fired from console, and document.ready fires everything else just fine. It just doesn't trigger the click.
Can someone figure out why?
Live Page. Site isn't public yet, so please identify with stackof//123O

For some reason I can't explain why it is happening, I used to experience the same thing and I'm creating DOM elements dynamically. Could you try this
$("body").on('click', 'yourClass/ID-Element', function () {
//your codes
});

Using the following function made everything work:
$(window).load(function()
Thanks!

Related

AngularJS window scroll event does not fire

I know there are some similar question concerning this problem, however I none of the solutions could help me.
I am using AngularJS and want to detect the scroll event. I tried plenty of versions on how to get the event, however at most it fires when first loaded then never again.
My last code I tried was the following:
$($window).on('scroll', alert('scrolled'));
But I also tried this:
Jquery .on('scroll') not firing the event while scrolling
or just the simple JQuery .scroll() event
window.onscroll = function(ev) ...
and many more, but nothing works.
Can anyone tell my what I am doing wrong?
Update: I tried the directive stuff, this works perfectly fine with safari BUT however not with chrome. Whats going on?
Update2: It works with the chrome mobile view when using the shift key. Are there any restrictions on chrome to apple trackpad? WTF?
I would just use
$(window).scroll(function () { alert('scrolled') })
OR you could use
angular.element($window).bind("scroll", function(e) {
alert('scrolled')
})
there is no need for angular.element()
inject $window to your controller,
use the window.onscroll event
$window.onscroll = function (){
console.log('window was scrolled!');
};

Jquery unobstrusive validation not working with submit event on jquery

I'm working in a project in MVC, but I've been having trouble with the jquery validation. I have this event handler for the submit on jquery because I plan to use ajax on it.
$("#form-cart").on("submit",function(e){
// codes
});
But here's the case, even when the input is invalid, it still goes inside the anonymous function. The form is located inside a modal. But I saw some piece of code somewhere and tried it which is this.
$("#MyModal").on("submit","#form-cart",function (e){
//codes
});
Amazingly it works, and it doesn't go inside the anonymous function when the input is invalid. But yeah, here's the problem. From my understanding the, if the second one worked, the first one should also have worked, but it didn't. Can someone tell me the reason why? It really bottles me.. Thanks.
I suggest you to use body click event :
Here is example :
$("body").on("submit","#form-cart",function (e){
//codes
});

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
});

jQuery late binding of Ajax elements doesn't work

I'm really stuck with a jQuery issue and I hope someone can help me out...
So I have a list of options on the left, and when you click on one, a form is generated via Ajax on the right. There's this element in the form:
<input type="text" class="value" value="something">
And what I want to do is to call
$(".value").tagsInput();
which is a jQuery plugin that works pretty much like Stack Overflow's 'Tags' input field when you ask a question.
So I tried this:
$(document).ready(function() {
$(".value").on("load", function () {
console.log("Tags Input");
$(".value").tagsInput();
});
});
and nothing is printed out. I've also tried this:
$(document).on("change", ".value", function () {
console.log("Tags Input");
$(".value").tagsInput();
});
and it doesn't work either. I'm wondering where I did wrong. Can anyone help me out?
As pointed out by Shabnam, the "change" event is not what you want, as it is fired only once the field is blurred.
Anyways, from the plugin documentation, it looks like you don't have to call that function every time a key is pressed, but it attaches its own event handlers autonomously.
So, probably you should be fine with just:
$(document).ready(function() {
$(".value").tagsInput();
});
Your .on handler will never work, as the load event is fired only by document when the page is ready.
If you want to debug things a bit, have a look at the supported callbacks, such as onChange.
SIDE NOTE
I don't like how that plugin is written, as it clogs the "global" jQuery.fn namespace with lots of functions, while jQuery documentation recommends not doing so (see: Namespacing).
UPDATE
See here: http://jsfiddle.net/aFPHL/ an example of this working (the .load() was monkeypatched to avoid having to call an actual URL, but its behavior is pretty much the same as the real one).
"change" event gets fired when the input element loses focus. If you want ajax call at the end of each key input, try using keyboard events

why are variables declared outside a function null?

i made this using mootools:
$("fox").addEvent("click", function(){
alert("clicked");
});
and the html:
<p id="fox">A</p>
now if i try it here http://jsfiddle.net/5uJ54/3/ , it works but if i try it in a browser and thats all the code it doesnt, i get this in firebug:
$("fox") is null
and it doesnt work in chrome either.
why is this happening? i have also tried putting everything inside a function but it still doesnt work.
If you try to select your element before the document is ready then you will get null.
The JSFiddle sandbox you have is setup to run after the document has been loaded.
To get the code to work in your document you can listen for this MooTools event which will be triggered after the document is ready:
http://mootools.net/docs/core/Utilities/DOMReady
Your example would end up looking something like this:
window.addEvent('domready', function() {
$("fox").addEvent("click", function(){
alert("clicked");
});
});
Are you sure mootools is being loaded and you are putting the javascript within some sort of domready event? (Not sure what mootools's version of it is).
Because you didn't include the mootools javascript library anywhere?

Categories