We Keep Coding

jquery select first child by class

I need to select the first child of clicked element and my click listener must be tied to the class "test". How can I do this?
<span class="test">click<input type="text" value="1"></span>
<span class="test">click<input type="text" value="2"></span>
<span class="test">click<input type="text" value="3"></span>
<span class="test">click<input type="text" value="4"></span>
I'm trying this but it's always returning 1.
$(".test").click(function(){
$test = $(".test").children("input[type='text']:first").val();
alert($test);
});
Here is jsfiddle that demonstrates the problem
https://jsfiddle.net/6zudq9wy/

You are referencing all test class elements within the click function, so jQuery will pick the first and output its' first children. Instead, reference this:
$(".test").click(function(){
$test = $(this).children("input[type='text']:first").val();
alert($test);
});

You mean something like this:
$(".test").click(function(){
alert ($(this).children().eq(0).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="test">click<input type="text" value="1"></span>
<span class="test">click<input type="text" value="2"></span>
<span class="test">click<input type="text" value="3"></span>
<span class="test">click<input type="text" value="4"></span>

JQuery detects focusOut even if I still focus on input inside the same div. How to change it?

This is my code:
Javascript:
$(".test").on("focusout", function (e) {
$("#output").append("Lost focus<br>");
});
HTML:
Inputs inside div:
<div class="test">
<input type="text" />
<input type="text" />
</div><br>
Inputs outside div:<br>
<input type="text" />
<div id="output">
</div>
I want to detect if user leaves "div.test". Unfortunately, "focusout" works also when I move focus to other object inside this div.
Look at this fiddle: http://jsfiddle.net/Piotrek1/wfukje3g/6/
Click on first input and use Tab to switch through textboxes. "
Lost focus" should appear only if user move out from the div, but it happens always. Why is that and how to change it?

The $ operator returns a collection. You have two inputs inside the <div class="test">. So it matches all elements and children with the .test class.
I think what you want two divs with separate input elements and two different classes OR, use an ID on the actual input element so the $ operator only matches the input id you want this event to fire on. http://jsfiddle.net/wfukje3g/7/
$("#test").on("focusout", function (e) {
$("#output").append("Lost focus<br>");
});
<div class="sometest">
<input id="test" type="text" />
<input type="text" />
</div><br>
Inputs outside div:<br>
<input type="text" />
<div id="output">
</div>

I have implemented piece of code to handle div focus out
$(document).ready(function () {
var count = 1;
$("#name").focusout(function (e) {
if($(this).has(e.relatedTarget).length === 0) {
$("#output").append("<label style='width:100%;'>"+ count++ +" Name div focus out </label>");
}
});
});
Inputs inside div:
<div id="name" class="test">
<input type="text" id="firstname"/>
<input type="text" id="lastname"/>
</div>
Inputs outside div:<br>
<input type="text" id="dob"/>
<div id="output" style="width:100%"></div>
In this piece of code I have used relatedTarget.
relatedTarget will provide the next focused element If next element is not the child of this div then it is div focus out.
Try this in your code.
I hope this will be helpful.
Thanks
JSFIDDLE LINK - Sample code

jQuery - the function doesn't get an ID/class

This function doesn't get the ID or class (first line), so the code is applied to all the fieldsets. For me that's not a big problem, but I would like to focuse the code on two specific IDs to make the code more compatible for plugins.
$('#feedburner_widget').ready(function() {
$('input').focus(
function(){
$(this).closest('fieldset').addClass('fieldset change-fieldset');
});
$('input').blur(
function(){
$(this).closest('fieldset').removeClass('change-fieldset');
});
});
Basically, this code adds a class to a fieldset when the user clicks on the input field. The ID is on the first line, but the code applies the effect to all the fieldsets. And it works exactly in the same way if I change '#feedburner_widget' to document. What I'm doing wrong? Thanks.
Edit: And this is the HTML code:
<form id="feedburner_widget" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?php echo esc_attr($user); ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<fieldset >
<input type="text" class="field" name="email" placeholder="<?php echo esc_attr($text); ?>" />
<input type="hidden" value="<?php echo esc_attr($user); ?>" name="uri" />
<input type="hidden" name="loc" value="<?php bloginfo('language'); ?>"/>
<span>
<input type="submit" value="" />
</span>
</fieldset>
</form>

When you do $('input'), you are asking jQuery to do a global search in the whole document. It does not 'remember' that you have just fetched the #feedburner element.
To search for only the elements in the #feedburner element, you could use the find() function on the jQuery object, like this:
$(document).ready(function() {
var $inputs = $('#feedburner_widget').find('input');
$inputs.focus(function(){
$(this).closest('fieldset').addClass('fieldset change-fieldset');
});
$inputs.blur(function(){
$(this).closest('fieldset').removeClass('change-fieldset');
});
});
In this particular case, you could also just alter the CSS selector to search directly for inputs inside the #feedburner_widget like this: $('#feeburner_widget input') If that element was already in a variable in your code, however, you should use the find method.

Change input value on tab

I'm coding a small web app to log team members work time. It all works well, except one thing. When you tab on a fieldset a new page opens with a form to change the time for that person. The first time you tab it works, but when you click on the next fieldset it changes all input fields with the name 'begin-time' ?
I think i'm missing something but I'm not sure what it is.
I have the following form;
<form id="time-form">
<fieldset>
<div class="row">
<input type="text" value="Jonh Doe" id="fullname" name="fullname" readonly="">
<div class="time">
<input type="text" value="00:00" id="begin-time" name="begin-time" readonly="">
<input type="text" value="00:00" id="end-time" name="end-time" readonly="">
</div>
</fieldset>
<fieldset>
<div class="row">
<input type="text" value="Jane Doe" id="fullname" name="fullname" readonly="">
<div class="time">
<input type="text" value="00:00" id="begin-time" name="begin-time" readonly="">
<input type="text" value="00:00" id="end-time" name="end-time" readonly="">
</div>
</fieldset>
</form>
with the new form 'on tab';
<form id="add-time">
<input type="time" name="begin_time">
<input type="time" name="end_time">
</form>
and the javascript;
$$('#time-form fieldset').tap(function() {
var beginTime = $(this).find("[name='begin-time']");
$('#add-time input[name=begin_time]').change(function() {
beginTime.val(this.value);
});
$$('.add-time').tap(function() {
$('#addTimePage').addClass('pt-page-moveToRightEasing pt-page-ontop');
$('#timePage').addClass('pt-page-moveFromLeft pt-page-current');
setTimeout(function () {
$('#timePage').removeClass('pt-page-moveFromLeft');
$('#addTimePage').removeClass('pt-page-moveToRightEasing pt-page-ontop pt-page-current');
}, 400);
});
});
edit: I have setup a simple fiddle of the problem.

Okay, so I noticed a few problems:
Your first .click() call was targeting ALL time-form fieldsets when it should have only been targeting input fields.
Your .change() and second .click() are called inside the first .click() meaning the new methods will be called multiple times (because each use of .click() and .change() adds on to the actual event.
Your submit button wasn't actually submitting anything. It was just hiding itself.
To fix this, I gave each fieldset a class name of .fieldset-time so they can easily be looped through. I added an onclick() event to each <fieldset> to easily manipulate the one (and its children) that was clicked.
Here's the new JavaScript code:
// invoked each time an input with the onclick() attribute is clicked
function editTime(obj) {
$("#addTimePage").fadeIn();
$(obj).attr("id", "active"); // set id to active so we know this is the one we want to change
}
$("#submit").click(function() {
// get the new beginning and end times set by the user
var newBeginTime = $("#add-time input[name=begin_time]").val();
var newEndTime = $("#add-time input[name=end_time]").val();
// loop through all elements with class .fieldset-time and find the active one
$(".fieldset-time").each(function() {
if ($(this).attr("id") == "active") {
$(this).attr("id", "");
$("input[name=begin-time]", this).val(newBeginTime);
$("input[name=end-time]", this).val(newEndTime);
return false; // break out of the .each() loop
}
});
// finally, clear and hide the add time box
$("#add-time input[name=begin_time], #add-time input[name=end_time]").val("");
$("#addTimePage").fadeOut();
});
And the new JSFiddle: http://jsfiddle.net/J4Hjf/7/
I hope that's what you were looking for. :)

how can I add a wildcard with jquery binding

how can I add a wild card into this jquery bind event so that form fields with 'PauNumber' are ignored? This field is repeated for each entity. Unfortunately I can't easily assign a css class to it because the text box is created server side.
many thanks
<div class="PassengerWrapper">
<input type="text" value="" name="PauNumber0" id="PauNumber0">
</div>
<div class="PassengerWrapper">
<input type="text" value="" name="PauNumber1" id="PauNumber1">
</div>
<div class="PassengerWrapper">
<input type="text" value="" name="PauNumber2" id="PauNumber2">
</div>
$('.PassengerWrapper input[type=text], .PassengerWrapper select').not(':hidden').each(function () {

You can do it inside the .not('selector') to filter the elements you don't want
$('.PassengerWrapper input[type=text], .PassengerWrapper select').not(':hidden,input[name*=PauNumber]').each(function () {
You can use [name*=PauNumber] or [id*=PauNumber]
Here's an example fiddle for you http://jsfiddle.net/XQWmf/
Also link to the different selectors