I've got a problem, I try to call my jquery event.
I have 2 jquery event:
$element.on('click', function (e) { ... });
$element.on('click', '.toggle', function (e) { ... });
I would like to call the event with toggle selector. How can I do this?
$element.trigger('click', '.toggle') call always the first event.
Thank you
Ok thanks,
now i do:
$element.find('toggle').trigger('click')
And it runs fine
Related
I have a problem with firing event.
So the code explains it better:
function Test() {
alert("called");
}
$(window).load(function(){
$(window).on( "scroll", Test );
});
Then I want to fire event for that Test to be called somewhere else.
function OnSomeActionDone() {
$(window).scroll(); // fire event
}
But seems like this not work, only from mouse or keyboard scrolling, what is wrong?
You are not invoking the method correctly. One way to invoke it programmatically would be to call the trigger() jQuery function, passing in the scroll handler name, as follows:
function OnSomeActionDone() {
$(window).trigger('scroll'); // fire event
}
You are using it wrong
$(window).scroll(function() {
alert('test');
});
is like
$(window).on('scroll',function() {
alert('TEST');
});
What you need to do is
function OnSomeActionDone() {
$(window).trigger('scroll'); // fire event
}
I am adding a listener like so:
window.addEventListener('native.showkeyboard', function (e) {
...
...
});
I'm writing a unit test for this so I want to trigger the event. Im doing:
window.trigger('native.showkeyboard');
But I end up with an error for that line saying:
undefined is not a function
How can I manually trigger this event?
EDIT
I have also tried:
$(window).trigger('native.showkeyboard');
but the handler doesnt run with this as it's not registered with jquery...
If you are triggering the event via jQuery then the event ought to have been attached via jQuery -- see #fredericHamidi's comment.
$(window).on('native.showkeyboard', function (e) {
.........
});
$(window).trigger('native.showkeyboard');
WORKING JSFIDDLE DEMO
Or if you're using plain vanilla JS do it this way:
window.addEventListener('native.showkeyboard', function (e) {
........
});
window.dispatchEvent( new Event('native.showkeyboard') );
WORKING JSFIDDLE DEMO
well you are not working with a jQuery object...That would be your problem.
window.trigger('native.showkeyboard'); //<-- window is not a jQuery object
You need to wrap it
$(window).trigger('native.showkeyboard');
Happy Friday errybody!
Alright, so I'm having trouble binding a 'click' event when a particular class of divs load.
What happens is that the 'click' event is being triggered on load. I've even tried unbinding before I bind.
onAppLoad = function() {
console.log('span 4 loaded');
hovering = function() {
console.log('hovering!');
}
$.each($('.span4 > a'), function() {
var whichApp = $(this).attr('data-content');
$(this).unbind('click');
$(this).bind('click', hovering());
})
}
$('.span4').load(onAppLoad());
You have a syntax error:
$(this).bind('click', hovering());
Here you are calling the function hovering while what you want it to give the reference. Try this :
$(this).bind('click', hovering);
Your .load() is wrong too (for the same reason).
$('.span4').load(onAppLoad);
Side note about the .each. When you are iterating a jquery object, you should write it like that :
$('.span4 > a').each(function() {})
Couple of things I see i your code:
1. You're missing a closing bracket for onAppLoad()
2. Change $(this).bind('click', hovering()); to $(this).bind('click', hovering);
3. Change $('.span4').load(onAppLoad()); to $('.span4').load(onAppLoad);
Out of curiosity, why not put all event handlers in a $(document).ready() event?
After initialize js I create new <div> element with close class and on("click") function doesn't work.
$(document).on('click', '.post-close', function () {
alert("hello");
});
but on('hover') work perfectly.
$(document).on('hover', '.post-close', function () {
alert("hello");
});
but I need to make it work on click.
It's because you're not preventing the default behaviour of the browser. Pass e into your handler and then use e.preventDefault()
$(document).on('click', '.post-close', function (e) {
e.preventDefault();
alert("hello");
});
Edit
Also, bind the handler before creating the new <div>
why not use something like
$('.post-close').click(function(){
//do something
});
If the element was added dynamically use:
$(document).on('click', '.post-close', function(){
//do something
});
edit:
like danWellman said, you can add the preventDefault IF you want to make sure no other code is executed. otherwise use the code above.
edit2:
changed the .live to .on
It's an old post but I've had a exactly same problem (element created dynamically, hover works, but click doesn't) and found solution.
I hope this post helps someone.
In my case, I found ui-selectable is used for parent element and that was preventing from click event propagate to the document.
So I added a selector of the button element to ui-selectable's 'cancel' option and problem solved.
If you have a similar probrem, check this
Try turn of libraries for parent element
You're not using stopPropagation() in parent element ?
lets say I have
function trigger(){
$('a.pep').each(function(){
$('a.pep').click(function(){
console.log($(this).val());
});
});
}
function push(){
$('body').append('<a class="pep">hey mate i have no trigger yet</a>');
trigger(); //now i do but the others have duplicated trigger
}
$(document).ready(function(){
$('a.push').click(function(){
push();
});
});
So it seems that the click event is being applied twice/+ because the console.log is lauched more than once by click
How can i prevent this?
The problem is that you call $('a.pep').click() lots of times. (In fact, you bind as many click handlers as there are matching elements to each element. And then you do it again every time one of them is clicked.)
You should lever the DOM event bubbling model to handle this. jQuery helps you with the on method:
$(document.body).on('click', 'a.pep', function() {
console.log('element clicked');
$(document.body).append('<a class="pep">Click handlers handled automatically</a>');
});
See a working jsFiddle.
Note that I have removed the val call, because a elements can't have a value... Note also that the on method is introduced in jQuery 1.7; before that, use delegate:
$(document.body).delegate('a.pep', 'click', function() {
Small change to your trigger function is all you need. Just unbind the click event before binding to ensure that it is never added more than once. Also, you don't need to use each when binding events, it will add the event to each item automatically.
function trigger(){
$('a.pep').unbind('click').click(function() {
console.log($(this).val());
});
}
You can check using data('events') on any element if the required event is attached or not. For example to check if click event is attached or not try this.
if(!$('a.pep').data('events').click){
$('a.pep').click(function(){
console.log($(this).val());
});
}
you should use jQuery live here because you add DOM elements dynamicly and you want them to have the same click behaviour
function push(){
$('body').append('<a class="pep">hey mate i have no trigger yet</a>');
}
$(document).ready(function(){
$('a.push').click(function(){
push();
});
$('a.pep').live('click', function(){
console.log($(this).val());
});
});
Try:
if($('a.pep').data('events').click) {
//do something
}
i think if you use live() event you dont need to make function
$('a.pep').live('click', function(){
console.log($(this).val());
});