We Keep Coding

how can i get .on click to work when .on contextmenu does but .on click does not fully work for dynamic content

I have a small snippet of code that is opening another window that is populated with dynamic content
$('#table-body').on('click', 'td#showTitle', function(e) {
e.preventDefault();
console.log('inside');
$('.quickview').addClass('is-active');
});
the above code will execute the log but not add the class however if I change the click to 'contextmenu' it works with a right click just as expected but this is not the functionality I want I would like to use a normal left click, is there something wrong with the code?

detect on change of text box in jquery

I am having a little confusion in jquery regarding an onchange event of a text box. I am having a text box and a small jquery snippet to detect if the user has pasted something:
$("#testid").bind("paste",function(){ do something.})
Is there any function like paste which detects whenever there is a change in the text box? i.e, when a user inputs something, immediately call a function (not on submit), and do something. Any help is appreciated

Use .change function.
$("#testid").change(function(){
//do something.
});
This works, if
user pastes something
user types
user deletes text
into/from the textbox. Globally, when textbox's value changes.
Jquery Documentation

You can use this. also check JSFiddle attached.
$("#txtBox").on('change', function(e){
alert('txtBox has changed: ' + $(this).val());
});
http://jsfiddle.net/AUSd6/

If you using latest jquery library, below script can be helpfull
$( "#testid" ).on( "change", function() {
//do something.
});
For Detail visit http://api.jquery.com/on/

Following are 3 methods those are very helpful if you have to detect changes as soon as user presses keys on keyboard. Keydown,Keypress,Keyup
Keydown--> would be called when your keyboard key is down.
Keyup --> called when user leaves the key after typing the character.
keypress--> is called as soon as user press the key on the keyboard.
There is change method also but this is called when someone after typing the word in textbox or any field clicks any place on the page or moves to next input field.
here is code how to use them.
$("#yourcontrolId").keyup(function(){
});
similarly you can use others 2 as well. every function have two overloaded versions

Run javascript/jquery after text change but before submit

I have an input element on a form along with a submit button.
I want to run the change event on the input element all whenever a change occurs. The problem is if end user changes text and clicks submit button the code in the change event doesn't run.
Immediately after user clicks the submit button, the form submits (like the change is not getting time to run, the same occurs with blur or focus out).
My controls can be placed on any form, and I do not control the click event of the button.
Help please

If you're wanting to catch whenever input in a textbox is changed try this in the document.ready
$("input[type='text']").change( function() {
$("#SubmitButton").attr('disabled', 'disabled');
// check input ($(this).val()) for validity here
// after text is updated..etc, enable the button
$("#SubmitButton").removeAttr('disabled');
});

may be you want use event.preventDefault

Expanding on #Aleks G's comment, the best thing for you to do is trigger your change handling on more than just the change event. Beyond keyup, I've found you also need to be careful to handle pasting with the mouse (doesn't trigger the keyup or change event):
yourInput.bind('change keyup paste', function() {
// Your code
});

JS jQuery Hiding element on unfocus stops other events from being fired

I have a search suggestion box that I hide when the search text box loses focus. This works great, except that when I click one of the suggestions the click event for that suggestion does not fire.
searchText.focusout(function () { $("#search-suggestions").hide(); });
I also tried:
searchText.focusout(function () { $("#search-suggestions").css("visibility", "hidden"); });
I tried commenting out the hide on unfocus code and the click events then worked fine.
(Basically, the blur event happens before the click on the suggestion can be registered, such that the element I attempted to click is not on the screen when the clicm does register)
here's the click event code:
//Called after the ajax load
$("#search-suggestions").find("a").click(function () { alert("hi"); })
I also tried rendering this on the server but it failed as well:
Search Suggestion
If any one has any suggestions I would appreciate it. Thanks!

You could try to define something like this:
//this goes where you first binding focusout handler
searchText.focusout(onFocusOut);
//this is a usual function
function onFocusOut() {
$("#search-suggestions").hide();
}
//this could be defined after you draw the search-suggestions control
$("#search-suggestions").hover(function() {
//this is hover in handler; unbind focusout from searchText
//something like that:
$("#searchText").unbind('focusout', onFocusOut)
}, function() {
//this is hover out handler; bind focusout to searchText
//something like that:
$("#searchText").bind('focusout', onFocusOut)
});
you could also use live (http://api.jquery.com/live/) to define hover handler for #search-suggestions, depending on what exactly you need.
This will make your search suggestions stay visible when clicking them. In click handler you can then hide them.

Try just making it invisible.
Change $('#my_search_box').hide(); to $('#my_search_box').css('visibility','hidden');
If you have surrounding DOM elements that need to act as if the search box is gone, you can just assign it an absolute position as well.

Try using .css('visibility', 'hidden') instead of .hide which uses display:none.

Why can't this checkbox, created dynamically with jQuery, be clicked?

jsFiddle
I'm using a jQuery plugin that allows the user to draw boxes in an area. I use jQuery to put a checkbox (along with a dropdown list) in the box that appears when the user lets go of the mouse button (this is towards the bottom of the javascript in the jsFiddle). The problem is, the checkbox is unclickable.
I do have some click checking code in the _mouseStart, _mouseDrag and _mouseStop events to stop another box from being created when you click in an existing box, but I don't think this is causing the problem because the dropdown list that is created can be clicked, and furthermore if you remove the click checking code the checkbox remains unclickable.
What is causing the checkbox to be unclickable? Thanks for reading.
EDIT:
Thanks to VinayC's answer, I can now see that the click reaches the checkbox, with this code:
$('#box').click(function(e){
alert('clicked');
$(this).attr('checked', true);
});
But the $(this).attr('checked', true); line doesn't make the checkbox checked. Can anyone tell me why? I've updated the jsFiddle
EDIT 2:
Harmen noticed that the code assigns the same id to each checkbox. In the actual code there's a counter appended to the id, so each one is unique, but I've taken that out because I think this is just a jQuery issue. I'd change the jsFiddle, but if you just create one box (thus one checkbox), the same problem occurs.

I've got no idea why, but while fiddling around (yes, on fiddlejs), this seems to do the trick
$('#box', ui.box).click(
function(evt){
evt.stopPropagation();
}
);
when setting up the box. See: http://jsfiddle.net/BBh3r/9/
I was actually trying to intercept the event and manually set it checked, but if there's no need to set it then hey.. Perhaps there's an extra event generated somewhere negating the first..? Click's only triggered once though.
Might be related to building jquery checkbox - can't set checked value
PS. Only tested on Chrome for Linux

You're creating multiple checkboxes with the same id.

It appears that top level event handlers are cancelling the click event. Add onclick event handler on check-box element alerting and you will see that click reaches to the checkbox.

Actually it is checked while the alert is visible, but it becomes unchecked afterwards. I'm guessing that after your event handler sets it to checked, the default event for the click (which is to toggle the check mark) happens, and since it is checked at the moment, it becomes unchecked again. Try calling preventDefault from the click handler.

You can also try this for a more universal approach
This worked for me.
$(document).click(function (e) {
if (element.tagName == 'INPUT') {
if ($(element).attr("type") == 'checkbox') {
e.stopPropagation();
e.preventBubble();
return;
}
}
});