We Keep Coding

unable to find the item that got user input with dynamically created items

Hi there I am encountering the following problem I have 3 div's dynamically loaded by ajax like so:
<div class="item" id="item1"> // Dynamically loaded
<input>
<input>
</div>
<div class="item" id="item2"> // Dynamically loaded
<input>
<input>
</div>
<div class="item" id="item3"> // Dynamically loaded
<input>
<input>
</div>
$(document).on('change', '.item', function() {
});
What I want to achieve is when I make a change on the input of one of the three div's, I wanna know where the input was provided. Because the elements are dynamically loaded I can't use a direct selector but I have to use $(document).on and because I dont make use of the direct selector I can't make use of (this). How do I find out in what item changes have been made?
Thanks in advance!

The first argument of the handler - for instance e - would receive the event if it is declared. Then the e argument is having target property which gives you the HTML element on which the event originated. So this would give you a reference to the changed input:
$(document).on('change', '.item', function(e) {
var targetInput = e.target;
var parent = $(targetInput).closest("div.item");
// Do something ...
});

According to your HTML, each div is having different id, Hence you can get the div Id on change of the input. Please test this piece of code and test.
$("input").on('keyup', function(){
//Get the parent div id,
var changeDivID = $(this).parents('div').attr("id");
alert(changeDivID);
});

How do I use jQuery to click and option and have it populate a field

I'm using the following code to have jQuery handle the click of an option and put that value in a field.
The code works except for the part I have in the tag.
I can't figure out why the part within the bold tag isn't doing anything when clicked, while the text after it does.
Here's the HTML:
<div id="result" style="display: block;">
<div class="show" align="left">
<b>This text doesn't work when clicked</b>
This text works when clicked
<span class="name" align="left">113096G</span>
</div>
And Here's the jQuery:
// When clicking an option, the value populates the #projectsearchid field
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find('.name').html();
$('#projectsearchid').val($name);
});
Possibly there's a simpler way to accomplish this?

var $name = $clicked.parent().find('.name').html();
find(): Description: Get the descendants of each element in the current set of
matched elements, filtered by a selector, jQuery object, or element.
Thus the method will look inside <b></b> for an element with the class name of name.. which of course it won't find anything, because in this case the element with the class name of name is a sibling and not a child. You'll notice that it will find something if you add .parent()
DEMO
$('#result').on('click',function(e){
var $clicked = $(e.target);
var $name = $clicked.parent().find('.name').html();
//$('#projectsearchid').val($name);
alert($name);
});

firstly, jquery.live is deprecated you should use jquery.on. the reason your code doesn't work is because when you click on the b element, the e.target is associated with and not div#result. when you call:
$clicked.find('.name').html();
it can't find the span.name because the element has no children with that class. the same happens when you click on as well. instead do
$clicked.parent('#result').find('.name').html();
that should get you what you need.

Element not reacting to JQuery Click

I have added Elements using Jquery inside PHP after loading them from the database. Each button has two classes, one controlling the GUI and another controlling the Click for particular button. The code is as under
echo "<script type='text/javascript'>$('.main').append('<button class=b_ui b$index>Change</button>'); </script>";
Now if I check the classes from Inspect Element perspective of the browser, it shows 2 classes. But when I click on it and get class of element using this code
$('.b_ui').click(function()
{
cls = $(this).attr('class');
alert('no. '+cls);
}
It shows only first class (GUI) and not the other which I want to use for handling click.
Any help ?

Put quotes around the class attribute. <button class=\"b_ui b$index\">Change</button>

You should use "on" method:
$(document).on('click', '.b_ui', function() {
cls = $(this).attr('class');
alert('no. '+cls);
});

When adding elements dynamically to the DOM, they are not accessible by jQuery like an element which was there at page load. say you have this div:
<div id="div"></div>
and you add some content with jQuery so it now looks like this:
<div id="div"><span id="span"></span></div>
you cannot refer directly to the span using jQuery with $('span[id=span]'), you have to target a containing element then filter which contained element you want:
$('#id').on('click','span',function(){});

When a Div class is clicked, alert it's inner content's Div Class

How do i even put these, let me try. In the following sets of codes, i want to click 'parentclass' and have an alert value of 'child1' and when i click the class below it which is 'Parent 2' have an alert fire with a value of 'child2'
So this must alert the content of that class only and not the entire class.
Here's some Javascript in Jquery.
var childclass = $('.childclass').html();
$('.parentclass').click(function(e) {
alert (childclass)
});
$('.childclass').click(function(e) {
e.stopPropagation()
e.preventDefault()
});
And HTML
<a href="" onClick="return false">
<div class='parentclass'>
Parent 1
<div style="display:none" class="childclass">child1</div>
</div>
</a>
<a href="" onClick="return false">
<div class='parentclass'>
Parent 2
<div style="display:none" class="childclass">child2</div>
</div>
</a>

This line var childclass = $('.childclass').html(); doesnt make sense as it doesn't know which element in particular you mean. The result of that will just be child1child2 which is just a concatenation of the .html() of all the elements with class childclass. This is obviously not what you want.
Therefore you should dynamically find the child with a class of childclass upon receiving the click event.
$('.parentclass').click(function(e) {
alert($(this).find('.childclass').html())
});
Also, you should know that your child class event handler is useless as we don't care if the event gets propogated downwards. If you DID care, then your e.stopPropagation() and e.preventDefault() should be in the event handler of the parent class.

You need to fetch the html of the clicked parent element within the click handler
$('.parentclass').click(function (e) {
alert($(this).find('.childclass').html())
});
$('.childclass').click(function (e) {
e.stopPropagation()
e.preventDefault()
});
Demo: Fiddle

Several ways you can go about this.
First, if your HTML will not be dynamic (elements already exist when page loads), then you can select elements by the parent class name and assign click event as so:
$('.parentclass').click(function(e) {
// the first variable here is selecting the inner elements having class 'childclass'
// keep in mind, if more than one child having that class is present within this parent, it will select all of them
var child = $(this).find('.childclass');
// here we alert the text of the inner child found
// if it is more than one, you will have undesired results. you may want to specify `.first()`
alert(child.text())
})
For newer jQuery you can also use $('.parentclass').on('click', function(e) {.
If you expect any pieces of parentclass to be dynamic, then you'll want to delegate the event based on either a static parent to the parents or document. This can be like so:
$(document).on('click', '.parentclass', function(e) {
alert($(this).find('.childclass').text())
})
Or, if you have a static (already there when page loads) wrapping element, give it an ID like `parentClassWrapper' and assign the click event dynamically as:
$('#parentClassWrapper').on('click', '.parentclass', function(e) {
alert($(this).find('.childclass').text())
})
Some helpful links:
jQuery API
jQuery Selectors
.click()
.on()
Some info on Event Delegation
jquery on vs click methods
jQuery .on('click') vs. .click() and .delegate('click')
jquery .live('click') vs .click()

I made several adjustments to your html that are worth noting. There's no need for the <a> tag. Don't use inline js - onlick in your html. Note that I wrapped the text inside of the div in the <a> tag instead. This markup is more semantic. Also, move your styles to css rather than in the html.
<div class="parent">
<a>Parent 1</a>
<a class="child">child of parent 1 contents</a>
</div>
<div class="parent">
<a>Parent 2</a>
<a class="child">child of parent 2 contents</a>
</div>
css:
.parent > .child { /* good practice: only select an immediate child of the parent */
display: none;
}
The other answers here are using find() to select the child, but I recommend children() instead. For example, if you had additional nested .childs, find() will select them all, but children() will only select direct .childs of the parent, so it is better in this case. I also recommend using the console for debugging rather than alert.
Live demo here (click).
$('.parent').click(function() {
var $child = $(this).children('.child');
var cls = $child.attr('class');
console.log(cls);
$child.show(); //added so that you can click the child
});
$('.child').click(function() {
var html = $(this).html();
console.log(html);
//if you just want the text, use this instead:
var text = $(this).text();
console.log(text);
});

jQuery: if $(this) or another element blurs, then

I want to trigger a function if either the currently active element $(this) or another predefined element (e.g.: div#tooltip) blurs. However so far I've not found out how to do this. I've tried:
$(this).add('div#tooltip').live('blur', function(){
$('div#tooltip').hide();
});
Imagine that $(this) would be an input field, for example, and the predefined second element would be a tooltip div and that I would want the tooltip to hide if one of those blurs.
EDIT:
The div#tooltip contains an anchor, which should not make the div#tooltip hide if it's being clicked.
EDIT 2:
Okay, here is a more accurate explanation of my problem. I've got the $.fn.tooltip function which I apply to various text-inputs which have variable class names and id's. Therefore, this input can only be referred to as $(this) within the function.
Secondly I have the tooltip div, which is created by the function. This div goes by the ID #tooltip. This tooltip / div can contain some other elements such as anchors.
The tooltip is shown automatically when the input-field (this) is clicked. Once it's closed it won't be shown again, even if the input-field will be focused again.
What I'm trying to do is:
The tooltip must be removed when the text-input loses it's focus
EXCEPT if the cursor is within the tooltip / div or if an element within this div is being clicked.
Anyone?

Like this: http://jsfiddle.net/uu3zX/7/
HTML:
<input type="text" class="with-tooltip">
<span class="tooltip">?<a style="display:none" href="#">The tip</a></span>
JavaScript:
$('.with-tooltip').on('focus', function(){
$(this).next().children().show();
});
$('.with-tooltip').on('blur', function(){
$(this).next().children().hide();
});
$('.tooltip').hover(
function(){
$(this).children().show();
},
function(){
$(this).children().hide();
}
);
UPDATE
Added alternative solution to fit OP requriment to use this

Borrowing from IntoTheVoid's fiddle: You should wrap the input and the tooltip in a container div (or some other container element) to do this in one line:
$('.tooltip, input').on('mouseout', function(){
$(this).parent().children('.tooltip').hide();
}).on('focus mouseover', function(){
$(this).parent().children('.tooltip').show();
});
http://jsfiddle.net/mblase75/uu3zX/5/