We Keep Coding

How to pick specific li element which is generated dynamically

I couldn't pick a specific li element on click which is generated dynamically. please help.
Jquery
$(document).ready(function()
{
$('#id1').on('click', 'li', function(e)
{
var val = $(this).find('.pick').attr('data-val1');
console.log(val); // returns only first value for every click
});
});
Dynamically created HTML
var x = document.getElementById("id1");
x.innerHTML= x.innerHTML + '<li class="pick" data-val1="'+i+'"></li>' // where i is a incremental counter
HTML
<ul id ="id1">
// li adds here
</ul>

Try this solution: http://jsfiddle.net/nec47v8d/
You can use this JQUERY
$('#id1 li.pick').click(function (e) {
var val = $(this).attr('data-val1');
alert(val)
});

Try
$(document).ready(function() {
$('#id1').on('click', 'li', function(e) {
var val = $(this).attr('data-val1');
snippet.log('clciekd: ' + val); // returns only first value for every click
});
var i = 0;
$('button').click(function() {
$('<li />', {
'data-val1': ++i,
text: i
}).appendTo('#id1');
})
});
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="id1"></ul>
<button>Add</button>

jQuery tabs add more selectors to same function

I managed to reduce my jquery tabs to this current state where I define tabs ID in variables.
Question: How to modify this code to have more IDs?
For example:
var tabsId = '#tabs1', '#tabs2', ... ;
var containerId = '#tabs-container1', '#tabs-container2', ...
JS:
var containerId = '#tabs-container';
var tabsId = '#tabs';
$(document).ready(function() {
// Preload tab on page load
if ($(tabsId + ' li.current a').length > 0) {
loadTab($(tabsId + ' li.current a'));
}
$(tabsId + ' a').click(function() {
if ($(this).parent().hasClass('current')) {
return false;
}
$(tabsId + ' li.current').removeClass('current');
$(this).parent().addClass('current');
loadTab($(this));
return false;
});
});
function loadTab(tabObj) {
if (!tabObj || !tabObj.length) {
return;
}
$(containerId).addClass('loading');
$(containerId).fadeOut('fast');
$(containerId).load(tabObj.attr('href'), function() {
$(containerId).removeClass('loading');
$(containerId).fadeIn('fast');
});
}
HTML:
<ul class="mytabs" id="tabs">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="mytabs-container" id="tabs-container">
Loading. Please Wait...
</div>

Actually, I don't se a single place in your code where you need your tabIds. It works exactly the same if you just remove it.
Unique instances of the .click() event will be added to each a element either way, and you don't have to specify them by ID´s. Here is an example with tabIds removed.
http://jsfiddle.net/c7RHs/
var containerId = '#tabs-container';
$(document).ready(function () {
if ($('li.current a').length > 0) {
loadTab($('li.current a'));
}
$('li a').click(function () {
if ($(this).parent().hasClass('current')) {
return false;
}
$('li.current').removeClass('current');
$(this).parent().addClass('current');
loadTab($(this));
return false;
});
});
function loadTab(tabObj) {
if (!tabObj || !tabObj.length) {
return;
}
$(containerId).addClass('loading');
$(containerId).fadeOut('fast');
$(containerId).load(tabObj.attr('href'), function () {
$(containerId).removeClass('loading');
$(containerId).fadeIn('fast');
});
}
Otherwise, you could make an array of ID´s as suggested in another answer, but I don't think you need it.
Hope it helps!

You could use array's like
var tabIds = {'tab1','tab2'};
Then you can loop over the array elements. An alternative is to use the variables like you mentioned (comma separated) and split them. Then you can loop through them again.
see this thread for an example: Split string with JavaScript

JQuery get link and add variable depending on nth number

I have a list set up containing links. Before this list is another link, this is the html:
<div class="catItemBody">
<div class="catItemImage">
Link
</div>
<ul class="sigProBetton">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
<div class="catItemBody">
<div class="catItemImage">
Link
</div>
<ul class="sigProBetton">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
There are multiple .catItemBody on the page, each containing a unique link.
I also have some jquery which takes the first link (.catItemImage a) and applies it to each of the links in the list. What I am trying to do is modify this link depending on the list items nth number. I have been experimenting with the first link item using the following jQuery:
$(document).ready(function() {
$('.catItemBody').each(function(){
var linkitem = $('.catItemImage a', this).attr('href');
if ($('ul.sigProBetton li').is(':nth-child(1)')){
$('ul.sigProBetton li a', this).attr('href' , linkitem+'?image=1');
} else {
$('ul.sigProBetton li a', this).attr('href' , linkitem);
}
});
});
Eventually I want to build on this so that the link in the first item has the URL variable of ?image=1, then the second will have ?image=2 etc... I need the 'count' to reset so that the list in the next .catItemBody will start again at ?image=1.
At the moment, each link has the variable ?image=1 which is not ideal. I have set up a jsFiddle at http://jsfiddle.net/Dyfe6/.
EDIT
All of your answers seem to work but the problem is that I have more than one .catItemBody on the page, an updated jsfiddle can be found at http://jsfiddle.net/Dyfe6/9/

No need to use nth-child.
I didn't understand if you wanted to reset or not the image count, so here it is not resetted :
$(document).ready(function () {
var count = 0;
$('.catItemBody').each(function () {
var linkitem = $(this).find('.catItemImage a').attr('href');
$(this).find('ul.sigProBetton li').each(function () {
count++;
$(this).find('a').attr('href', linkitem + '?image=' + count);
});
});
});
jsFiddle : http://jsfiddle.net/Dyfe6/11/
And here it is resetted :
$(document).ready(function () {
$('.catItemBody').each(function () {
var linkitem = $(this).find('.catItemImage a').attr('href');
$(this).find('ul.sigProBetton li').each(function (index) {
$(this).find('a').attr('href', linkitem + '?image=' + (index + 1));
});
});
});
http://jsfiddle.net/Dyfe6/12/

This may not be the best way, but I've done it like this:
var pre = $('.catItemImage').children('a').attr('href');
var links = $('.sigProBetton li a'),count=1;
$(links).each(function() {
$(this).attr('href',pre+'?image='+count);
count += 1;
});

use :first-child instead of :nth-child(1)

updated
$(document).ready(function () {
$('.catItemBody').each(function () {
var linkitem = $('.catItemImage a', this).attr('href');
var $this=$(this);
$this.find('ul.sigProBetton li').each(function (index) {
$this.find('a').attr('href', linkitem + '?image=' + (index + 1));
});
});
});
fiddle here

You can leverage the jQuery's index() method. http://api.jquery.com/index/
Here's the update jsFiddle: http://jsfiddle.net/ArtBIT/Dyfe6/4/

JQuery adding a class

I want add a class when a <li> element clicked. but it didn't work. Here's JQuery snippet
$(".mama").click(function(){
var arr = ["cat","dog", "mice", "bird"];
alink = $(this).text();
$.each(arr, function(index, value) {
if(alink == value){
$(this).addClass('hi');
}
});
});
And HTML
<ul id="animal">
<li class="mama">cat</li>
<li class="mama">dog</li>
<li class="mama">Mice</li>
</ul>
i also have tried to do it by .map but nothing happen. please give solution and some explain. Thanks

This should work:
$(".mama").click(function(){
var $this = $(this);
var arr = ["cat","dog", "mice", "bird"];
alink = $(this).text();
$.each(arr, function(index, value) {
if(alink == value){
$this.addClass('hi');
}
});
});
because this inside the each is not the DOM element <li>.

You probably just need to do this:
http://jsfiddle.net/reugB/1/
$('.mama').on('click', function(evt) {
evt.preventDefault();
$(this).addClass('hi');
});

Use this to refer to current element which was clicked.
$(".mama").click(function (e) {
e.preventDefault();
$(this).addClass('hi');
});

If you mean add the class hi to the clicked li, just do like below:
$(".mama").click(function(e){
e.preventDefault();
$(".mama").removeClass('hi');
$(this).addClass('hi')
});

.hi { background-color: #f00 !important;}
$('.mama').on('click', function(evt) {
evt.preventDefault();
$(this).addClass('hi');
});

$(".mama").click(function(e){
e.preventDefault();
var arr = ["cat","dog", "mice", "bird"];
var alink = $(this).find("a").text();
$.each(arr, function(index, value) {
if(alink == value){
$(this).addClass('hi');
}
});
});
see reference text and find

how can I fix the error: this.parentNode is null?

I'm developing an app where you can display all monuments and places to be in Ghent (Belgium). There's a fullscreen map on the homepage (programmed in jQuery with Google Maps API v3) and on the lefthand side, there's a list of the items that you can display. Users can choose whether they want the category to be displayed alone, or to be added to the categories that they clicked before.
This is what happens: I load the page, I click a category. Everything works fine. But only if I click spans in the same category. Whenever I click something in another category, firebug throws the error: parent is null (or this.parentNode is null)
I initially tried to do it in jQuery with $(this).parent().html()..., but it gives me a similar error: 'TypeError: parent.html(...) is undefined'.
Here's my code...
HTML
<section class="category transport">
<h1>Transport</h1>
<ul class="clearfix">
<li><span class="category_li">Parkings</span></li>
<li><span class="category_li">Stations</span></li>
</ul>
</section>
JQUERY (HOVER EFFECT)
this is where I add the 'add_on_map' span to the list-items
$('.category ul li').hover(
//mouse-enter
function()
{
if($(this).children('.add_on_map').length == 0)
{
$(this).append(add_marker_sign);
$('.add_on_map').click(showCategory);
}
else
{
$(this).children('.add_on_map').show();
}
},
//mouse-leave
function()
{
$(this).children('.add_on_map').hide();
}
);
JQUERY (CLICK EVENT)
function showCategory(e)
{
var parent = null;
parent = this.parentNode;
var add_marker_sign = '<span class="add_on_map plus"> +</span>';
var remove_marker_sign = '<span class="add_on_map minus"> -</span>';
var element;
var to_removed_marker_sign = parent.innerHTML.replace(add_marker_sign, remove_marker_sign);
var to_add_marker_sign = parent.innerHTML.replace(remove_marker_sign, add_marker_sign);
//User clicks span -> If you click on the word:
// All markers are deleted and the clicked category is added
//So when the clicked item doesn't have the 'add_on_map' class:
if(!$(this).hasClass('add_on_map')){
console.log('remove all markers and add new');
removeAllMarkers();
element = $(this).text().toLowerCase();
$(this).parent().html(to_removed_marker_sign);
$('.category ul li').removeClass('active_subcategory');
addMarkers(element);
$('.category ul li span').click(showCategory);
}
//When clicked item DOES have 'add_on_map' class:
else
{
element = $(this).parent().children('.category_li').text().toLowerCase();
//Check if markers should be ADDED or DELETED
if($(this).hasClass('plus')) {
console.log('add markers');
$(this).parent().html(to_removed_marker_sign);
addMarkers(element);
$('.category ul li span').click(showCategory);
}
if($(this).hasClass('minus')) {
console.log('remove markers');
$(this).parent().html(to_add_marker_sign);
removeMarkers(element);
$('.category ul li span').click(showCategory);
}
}
}
I made a small live demo on jsfiddle!
If anyone can help me with this, I'd be greatful!
Thanks in advance.
Helena S.

I've based on your JSFiddle and come to that solution: http://jsfiddle.net/98gmn/6/ (only the jQuery part has changed)
jQuery
var add_marker_sign = '<span class="add_on_map plus"> +</span>';
var remove_marker_sign = '<span class="add_on_map minus"> -</span>';
$('.category ul li').click(showCategory);
$('.category ul li').hover(
//mouse-enter
function () {
if ($(this).children('.add_on_map').length == 0) {
$(this).append(add_marker_sign);
} else {
$(this).children('.add_on_map').show();
}
},
//mouse-leave
function () {
$(this).children('.add_on_map').hide();
});
function showCategory() {
var element;
var $this = $(this);
var $marker = $this.find('span.add_on_map');
element = $(this).text().toLowerCase();
$this.toggleClass('show_on_map');
$marker.toggleClass('plus').toggleClass('minus');
if($marker.hasClass('plus'))
{
$marker.html(' +');
}
else
{
$marker.html(' -');
}
}
It simplifies the DOM and event manipulation, sets the class "show_on_map" on list elements which are to be show on map.