Develop Reference

jQuery process dynamically added anchor tags isn't working

jQuery doesn't process dynamically added anchor tags. The <li> <a> tags are added more dynamically. The below code works to add attributes for the anchor's tags that are already there but more pagination is added by XHR AJAX calls and the .each() function doesn't work.
$(document).ready(function () {
$("ul.page-selector-list li a").each(function () {
var pageText = $(this).text();
$(this).attr("aria-label", "click here for " + pageText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="page-selector-list">
<li class="page-selector-item-first inactive">First</li>
<li class="page-selector-item-previous inactive">Previous</li>
<li><a class="page-selector-item-link active" data-offset="0" data-itemnumber="1" href="#">1</a></li>
<li><a class="page-selector-item-link" data-offset="10" data-itemnumber="2" href="#">2</a></li>
<li><a class="page-selector-item-link" data-offset="20" data-itemnumber="3" href="#">3</a></li>
<li><span class="page-selector-more">...</span></li>
<li><a class="page-selector-item-link" data-offset="2020" data-itemnumber="203" href="#">203</a></li>
<li class="page-selector-item-next">Next</li>
<li class="page-selector-item-last">Last</li>
</ul>

Please try below code when you find your code is not working after AJAX:
$( document ).ajaxComplete(function() {
$('ul.page-selector-list li a').each(function(){
var pageText = $(this).text();
$(this).attr('aria-label', 'click here for '+ pageText);
});
});
Please let me know if you find any issues.

Jquery : find previous element from element with specific class on lists

I need to find this element :
<ul id="pagin">
<li><a id="previous"><</a></li>
<li><a class="pagination">1</a></li>
===> <li><a class="pagination">2</a></li>
<li><a class="pagination current">3</a></li>
</ul>
Current class is changing but I always need to select its previous element if it exists
I tried :
$("#pagin li a").closest(".current").prev(".pagination")
$("#pagin li a.current").prev()
$("#pagin li a.pagination.current").prev()
Maybe this don't work because it's searching for previous element with .pagination but can't find the way to select the good element

You can use :has() selector to get <li> having a.pagination.current element then use .prev() to get its immediately preceding sibling
var prevli = $("#pagin li:has(a.pagination.current)").prev();
var prevLiAnchor = prevli.find('a');
$("#pagin li:has(a.pagination.current)").prev().css('color', 'red')
.current{ color : green}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="pagin">
<li><a id="previous"><</a></li>
<li><a class="pagination">1</a></li>
<li><a class="pagination">2</a></li>
<li><a class="pagination current">3</a></li>
</ul>

Use parent and prev.
console.log($("#pagin li a.current").parent().prev('li').find('a').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="pagin">
<li><a id="previous"><</a></li>
<li><a class="pagination">1</a></li>
===> <li><a class="pagination">2</a></li>
<li><a class="pagination current">3</a></li>
</ul>

$(function(){
$("#pagin li").click(function(){
$("#pagin .pagination").removeClass("current previous");
$(this).find("a").addClass("current");
$(this).prev().find("a").addClass("previous");
});
})
.current::after{
content: " - current";
color: blue;
}
.previous::after{
content: " - previous";
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Click on each item</h4>
<ul id="pagin">
<li><a class="pagination"><</a></li>
<li><a class="pagination">1</a></li>
<li><a class="pagination previous">2</a></li>
<li><a class="pagination current">3</a></li>
<li><a class="pagination">4</a></li>
<li><a class="pagination">5</a></li>
<li><a class="pagination">6</a></li>
</ul>

var previousLink = $("ul#pagin li a.current").closest('li').prev().find('a.pagination');
if(previousLink){
//do something
}else{
//do something else
}
closest is a better way to go because even if you wrap anchor tag(a) with some wrapper for styling, closest will still be able to find the LI tag.
closest begins with the current element and travels up the DOM tree
until it finds a match for the supplied selector.

Targeting an element with specific data attribute value

I am working on the code below. How can I add .click() to the a link with specific data attribute of HD?
if ($(a).data("quality") == "HD") {
$(this).click();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="stream">
<li><a data-quality="L">Low</a></li>
<li><a data-quality="M">Med</a></li>
<li><a data-quality="HD">HD</a></li>
</ul>

Use an Attribute Selector
$("a[data-quality=HD]").click();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="stream">
<li><a data-quality="L">Low</a></li>
<li><a data-quality="M">Med</a></li>
<li><a data-quality="HD">HD</a></li>
</ul>

you can make use of Attribute Selectors:
$('a[data-quality="HD"]').click(function() {
//do something
});

You can directly bind the click to the anchor with data-quality attribute
Demo
$("a[data-quality='HD']").click( function(){
console.log($(this).text())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="stream">
<li><a data-quality="L">Low</a></li>
<li><a data-quality="M">Med</a></li>
<li><a data-quality="HD">HD</a></li>
</ul>

pure js approach
window.onload = clickAnchor();
function clickAnchor() {
let anchorTags = document.getElementsByTagName('a');
for(i=0;i<anchorTags.length;i++) {
if(anchorTags[i].getAttribute('data-quality') == 'HD') {
anchorTags[i].click();;
}
}
}
<ul class="stream">
<li><a onclick = "alert('low clicked')" data-quality="L">Low</a></li>
<li><a onclick = "alert('med clicked')" data-quality="M">Med</a></li>
<li><a onclick = "alert('HD clicked')" data-quality="HD">HD</a></li>
</ul>

Twin unordered lists

So i have this structure:
<ul>
<li class="paginator"><a class="active">1</a></li>
<li class="paginator"><a>2</a></li>
<li class="paginator"><a>3</a></li>
</ul>
... bunch of html code
<ul>
<li class="paginator"><a class="active">1</a></li>
<li class="paginator"><a>2</a></li>
<li class="paginator"><a>3</a></li>
</ul>
Which is an unordered anchor, every time the user clicks on an anchor it becomes of the active class. My question is: What's the best way to duplicate this effect on both anchors. So far, when i click on the anchor 2 of the bottom, it succesfully get the active class, but the anchor 2 of top doesn't. Is there a way to have something like twin or cloned elements?

You can get the index of the clicked li.paginator element, and set the active class to any other li.paginator with the same index using nth-child, that way the class gets added to both UL's
var lis = $('.paginator').on('click', function(e) {
e.preventDefault();
var idx = $(this).closest('li').index();
lis.find('a').removeClass('active');
lis.filter(':nth-child('+(idx+1)+')').find('a').addClass('active');
});
a {cursor : pointer}
a.active {
text-decoration: underline;
color: red!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="paginator"><a class="active">test 1</a></li>
<li class="paginator"><a>test 2</a></li>
<li class="paginator"><a>test 3</a></li>
</ul>
<!-- ... bunch of html code -->
<ul>
<li class="paginator"><a class="active">test 1</a></li>
<li class="paginator"><a>test 2</a></li>
<li class="paginator"><a>test 3</a></li>
</ul>

If you set it up like this is should work the same for both ul elements, unless you are wanting the elements to mirror each other:
$('.paginator').click(function(){ $(this).find('a').addClass("active") });

Change The ID value for the a tag in html

<nav>
<ul>
<li><a id ="current" href="Default.aspx">A</a></li>
<li>B</li>
<li> C</li>
<li> D</li>
<li> E</li>
<li> F</li>
</ul>
</nav>
I have menu tab like this a link I want to change the id="current" to the tab im in. for example if user clicks and he is on page C the id=current must be in C.
Thanks all

Very crazy idea to change ID.
If it is not really needed (probably 100% of cases), I suggest to use another property to select current element. For example class, or even custom data- in html5.
Take a look here: http://www.w3schools.com/tags/att_global_data.asp

You're better off using a class for this, but this should do what you want:
<script>
$( "a" ).click(function() {
$('#current').attr('id',''); // clear old current
$( this ).attr('id', 'current'); // set new current
});
</script>

I can see you are using asp, so you can just use some logic to check the current url and assign id or class to the link.
Another way would be to use jquery to do this dynamically. Although asp is the best way to do it in your case.
//HTML
<nav>
<ul>
<li><a id ="A" href="Default.aspx">A</a></li>
<li><a id ="B" href="suppliers.aspx">B</a></li>
<li><a id ="C" href="ServiceLocation.aspx"> C</a></li>
<li><a id ="D" href="Default3.aspx"> D</a></li>
<li><a id ="E" href="jobs.html"> E</a></li>
<li><a id ="F" href="contactus.aspx"> F</a></li>
</ul>
</nav>
//jquery
$('nav ul li a').removeClass('current');
if (window.location.href.indexOf("Default.aspx") > -1) {
$('nav ul a#A').addClass('current');
}elseif (window.location.href.indexOf("suppliers.aspx") > -1) {
$('nav ul a#B').addClass('current');
}
//Css
Just copy the same styling form #current to .current

As others have said you should probably use a class rather than an id, unless you have a very good reason for it.
Here is the code for changing the id
$( "li > a" ).click(function() {
$('#current').removeAttr( 'id','current');
$( this ).attr('id', 'current');
});
or the class instead..
$( "li > a" ).click(function() {
$('.current').removeAttr( 'class','current');
$( this ).attr('class', 'current');
});
And here is your modified jsfiddle http://jsfiddle.net/39rc2Le5/2/
Update
If you use the class instead you will have something like this...
<nav>
<ul>
<li><a class="current" href="#">A</a>
</li>
<li><a class="" href="#3">B</a>
</li>
<li><a class="" href="#"> C</a>
</li>
<li><a class="" href="#"> D</a>
</li>
<li><a class="" href="#"> E</a>
</li>
<li><a class="" href="#"> F</a>
</li>
</ul>
</nav>
Then your tabs which are currently styled by a#current properties would be styled by a.current properties. So change your css selector like this.
nav ul li a.current {
background-color: #F9F9F9;
border-style: solid;
border-color: #ee1d78;
border-top: 15px;
border-left: none;
border-right: none;
}