Got this piece of code, which works great. However the .trigger('change') is not working.
$(function () {
$('form').each(function () {
var form = $(this);
form.find('.cbox1').change(function () {
if (form.find('.cbox1:checked').length) {
form.find('.cbox2, .cbox3').button("enable");
} else {
form.find('.cbox2, .cbox3')
.prop("checked", false)
.trigger("change")
.button("refresh")
.button("disable", "disable");
}
});
});
});
I know this is probably something simple, but for a noob like me, it's killing me, been reading and studying for days...
Any knowledge/assistance is greatly appreciated,
Si
It works fine. Try adding this line and you'll see that cbox2 change is triggered.
$('form').find(".cbox2").on("change", function() {alert("cbox2 triggered")});
When you are triggering a change, you are triggering it on .cbox2 and .cbox3. However you have not added any listener for the change event on these elements. The listener for change event is attached only to .cbox1. If that is the listener you want to trigger, then call the the trigger("change") on .cbox1 or add event listeners for the other two elements.
Related
I am trying to bind some functions to some input fields. The weird part is, if I add the .change event to the inputs it fires just fine but when I add the '.keyup' on the same inputs the event does not fire.
Note: Yes the inputs are found in a document ready function. I also commented out the .unbind method and that did not fix the issue. The only reason that is there is so I can call the this method later and the inputs will not be bound twice.
here is what I am using:
bindInputChange: function()
{
var inputs = jQuery(':input');
if(inputs != null)
{
inputs.unbind();
}
inputs.change(function() { alert('change called'); }); // this one works
inputs.keyup(function() { alert('keyup called'); }); // this one does not
},
any ideas? Thanks!
It turns out that I have another function that makes anything you type uppercase and that function has an .unbind which was removing the .keyup. After removing the .unbind everything worked. Thanks for all the help!
I am using a jquery selectable as shown below.
//Selectable Functionality
$(document).ready(function () {
$("#Selectable_Positions").selectable({
selected: function (event, ui) {
dostuff();
}
})
})
It is working correctly however only left click will cause the select event to fire. I am trying to make it so that right click will as well. I have tried adding the code below and the alert fires but the selected item does not change.
$(document).ready(function () {
$('#Selectable_Positions').mousedown(function () {
$('#Selectable_Positions').trigger('selectableselected');
alert('foo');
})
})
How can I programatically change the selected item in the mousedown event function?
edit
Updated eventname as per Ian's suggestion below.
I have created a jsfiddle showing what I am trying to achieve and the triggered event not firing on right click. Does anybody know how to make this work? It would be greatly appreciated
http://jsfiddle.net/Jzjdm/
The correct event name is "selectableselected". So use:
$('#Selectable_Positions').trigger('selectableselected');
Reference:
http://api.jqueryui.com/selectable/#event-selected
Ended up writing my own select function and calling it on right click. Not sure what is up with that 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 ?
I need a catch copy & paste event. I have a example. But paste event fires 4 times. Why? I need a it a one time. Here is the code? Please help me?
$(function() {
return $('#myform').bind('paste', function(e) {
return alert("123");
});
});
I'm not sure which browser your experience four events being fired, but I've jus tested your code for myself and could not reproduce the behaviour. That being said, there are a few issues with your code as it is...
There is no need to return the jQuery object after binding the event.
There is no need to return alert(), since alert returns undefined.
Take a look at these changes:
$(function() {
$('#myform').bind('paste', function(e) {
console.log(e.type);
});
});
See live: http://jsfiddle.net/rwaldron/6CKxM/
I think I've been too much time looking at this function and just got stuck trying to figure out the nice clean way to do it.
It's a jQuery function that adds a click event to any div that has a click CSS class. When that div.click is clicked it redirects the user to the first link found in it.
function clickabledivs() {
$('.click').each(
function (intIndex) {
$(this).bind("click", function(){
window.location = $( "#"+$(this).attr('id')+" a:first-child" ).attr('href');
});
}
);
}
The code simply works although I'm pretty sure there is a fairly better way to accomplish it, specially the selector I am using: $( "#"+$(this).attr('id')+" a:first-child" ). Everything looks long and slow. Any ideas?
Please let me know if you need more details.
PS: I've found some really nice jQuery benchmarking reference from Project2k.de here:
http://blog.projekt2k.de/2010/01/benchmarking-jquery-1-4/
Depending on how many of these div.click elements you have, you may want to use event delegation to handle these clicks. This means using a single event handler for all divs that have the click class. Then, inside that event handler, your callback acts based on which div.click the event originated from. Like this:
$('#div-click-parent').click(function (event)
{
var $target = $(event.target); // the element that fired the original click event
if ($target.is('div.click'))
{
window.location.href = $target.find('a').attr('href');
}
});
Fewer event handlers means better scaling - more div.click elements won't slow down your event handling.
optimized delegation with jQuery 1.7+
$('#div-click-parent').on('click', 'div.click', function () {
window.location.href = $(this).find('a').attr('href');
});
Instead of binding all the clicks on load, why not bind them on click? Should be much more optimal.
$(document).ready(function() {
$('.click').click(function() {
window.location = $(this).children('a:first').attr('href');
return false;
});
});
I would probably do something like;
$('.click').click(function(e){
window.location.href = $(this).find('a').attr('href');
});