Develop Reference

Click event on <a> tag inside <span> tag in jquery

Im trying something simple, i am quite noob in jquery and i don´t know how to make an click event when you click in an a tag that is inside a span tag, this is my code.
<span>
<a class="paginate_button current" aria-controls="table_id" data-dt-idx="1" tabindex="0">1</a>
<a class="paginate_button " aria-controls="table_id" data-dt-idx="2" tabindex="0">2</a>
<a class="paginate_button " aria-controls="table_id" data-dt-idx="3" tabindex="0">3</a>
<a class="paginate_button " aria-controls="table_id" data-dt-idx="4" tabindex="0">4</a>
</span>
I tried this but it doesn't work
$("#table_id_paginate > span > a.paginate_button").click(function() {
alert("Handler for .click() called.");});

The markup you provided does not have an element with the ID "table_id_paginate". So jQuery is selecting the links because it is looking for a elements with the class paginate_button who are direct descendants of a span that is a direct descendant of an element with that ID.
So if you change your code to how Tim Lewis commented: $(".paginate_button").click(...) the code works.

Just making this change will make it work, basically you want that any <a> tag with .paginate_button class should work on click.
<script>
$("span > a.paginate_button").click(function() {
alert("Handler for .click() called.");});
</script>
Edit :
How to go about these :
Figure out the target element, then keep going up towards the parent and
that becomes your target.

$("a.paginate_button").on("click", function () {
//your code here
})

Why isn't jQuery closest working

I am working on a small system that uses collapsable blocks - for this I am have a css class that toggles on or off depending on the jQuery dependancy.
The code I am using is:
$("#click_me").on("click", function () {
$("#clicked_action").toggleClass("show");
});
And this works, but is not what is needed. What is need is:
$(".collapse-header").on("click", function () {
$(this).closest(".collapse-body").toggleClass("show");
});
But this does not work.
I am not getting any console errors, so any help is apprecated
EDIT HTML value:
<div class="collapse-header" id="click_me">
<span class="float-left">Click me</span>
<span class="float-right"><span class="glyphicon glyphicon-plus"></span></span>
<hr class="hr" />
</div>
<div class="collapse-body" id="clicked_action">
I'm collapsed
</div>

You are looking for
$(this).parent().find(".collapse-body")
About .closest
$(element).closest(selector) is to find the first element which matches selector in traversing up through element's ancestors.
In your case, your elements are at the same level ("siblings") so .closest doesn't work.

Targeting specific element ID that is passed from PHP

I am currently listing 10 items per page , and problem is that when this function is called it will only target 1st (latest) element and do nothing on rest of them.
My question is :
How would i target each individual
<span id="report-text"></span>
with <i id="report"></i> element that belong to same unique-id <div id="$dbstuff></div> given by PHP.
This is my Jquery code to target element
$('#report').hover(function(){
$('#report-text').show();
},function(){
$('#report-text').hide();
});
HTML code is following :
<div class="vote_wrap" id="<?php echo $row->id;?>">
<span id="report-text">Report Inappropriate Content</span>
<i class="fa fa-exclamation" id="report"></i>
</div>

You can do it by achieving right selectors .. use class as suggestions in comments ..
Do as below-
JS
$('.report').hover(function(){
$(this).prev('.report-text').show();
},function(){
$(this).prev('.report-text').hide();
});
HTML
<div class="vote_wrap" id="<?php echo $row->id;?>">
<span class="report-text">Report Inappropriate Content</span>
<i class="fa fa-exclamation" class="report"></i>
</div>

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM.
Source
Change your ID's to Class

Click event toggling all classes rather than correct block

I have some collapsed/collapsible blocks whereby the first block is open and second/third closed. They work the way I want in terms of opening and closing, but I can't get my head around how to alter the function so that the plus and minus icons change for the correct block. At the moment all change at the same time no matter which block I open or close.
How I can alter the function so that the toggled block updates the correct icon?
function toggleDiv(divId) {
$("#"+divId).toggle();
$('.product-toggle span.icon').toggleClass('icon-plus icon-minus')
}
HTML
<p><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Features</span></p>
<div id="features">
Features
</div>
<p><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Specifications</span></p>
<div id="specifications">
Spec
</div>
<p><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">FAQ</span></p>
<div id="faq">
FAQ
</div>

Let me start off by saying no... just no!
Add the target in your markup as a data attribute:
<div class="product-toggle" data-target="features">
<p>
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="toggle-title">Features</span>
</p>
</div>
<div id="features">
Features
</div>
Attach a listener to the product-toggle class like so:
$(document).on('click', '.product-toggle', function() {
var target = this.dataset.target;
$('#'+target).toggle();
$(this).find('span.icon').toggleClass('icon-plus icon-minus');
});
JsFiddle

Note : Inline events are discouraged; you should use jQuery click handlers as you're already using jQuery.
For example (Demo):
$('a.product-toggle').click(function(e){
$(this).closest('p').next('div').toggle();
$(this).find('span.icon').toggleClass('icon-plus icon-minus')
})
If you need to use inline event calls,
You need to alter the second line to get the icon for current element
function toggleDiv(divId) {
$("#"+divId).toggle();
$("#"+divId).prev('p').find('.product-toggle span.icon').toggleClass('icon-plus icon-minus')
}
because,
$('.product-toggle span.icon')
selects all the <div>s
or pass this with the click event.
<p><a href="javascript:toggleDiv('features',this);"...
and
function toggleDiv(divId,currEl) {
$("#"+divId).toggle();
$(currEl).find('span.icon').toggleClass('icon-plus icon-minus')
}

Here is something I came up with which is a more handy solution and is not using javascript in href.
$('.product-toggle').on('click', function(evt){
// This will be set to the context of the current element
$("#"+this.name).toggle();
$(this).find('.icon').toggleClass('icon-plus icon-minus');
});
This requires that you give the a tags a name instead of calling the function directly. Here is a link to the fiddle: http://jsfiddle.net/ttpfzrgL/

Try this
function toggleDiv(divId) {
var idSelector = "#"+divId;
$(idSelector).toggle();
$('p').has('idSelector').closest('span.icon').toggleClass('icon-plus icon-minus');
}

How to get class with * in jQuery and CSS?

I have many elements:
<span class="test"></span>
<span class="aaa"></span>
<span class="test-one"></span>
<span class="test-two"></span>
<span class="aaa-one"></span>
<span class="test-two"></span>
How can i get with one select all span with name test*?
I can:
$('.test, .test-one, .test-two')
but maybe is possible to get this with regex?
$('.test*')
?
in css:
.test, .test-one, .test-two
.test*

You're abusing classes, and are looking for multiple classes instead:
<span class="test"></span>
<span class="aaa"></span>
<span class="test one"></span>
<span class="test two"></span>
<span class="aaa one"></span>
<span class="test two"></span>
Now, $('.one') will correctly return the 3rd and 5th element, and $('.test') will return all elements except the 2nd and 5th.
Note that you can also use $('.two.test') to get the 4th and 6th element.

Use the starts-with selector:
$('span[class^="test"]').
http://api.jquery.com/attribute-starts-with-selector/

It's not clear from the small example whether there's a pattern to the -one and -two class names.
If there is a pattern, and your idea is to have alternating classes (eg odd and even rows?), then you might want to consider using the nth-child() selector. This will allow you to select the relevant elements without needing to reference any class names at all.
In this case, you could do something like this:
<div class='container'>
<span class="test"></span>
<span class="test"></span>
<span class="aaa"></span>
<span class="test"></span>
</div>
and then the jquery:
$('container span:nth-child(odd)')
and
$('container span:nth-child(even)')
See the jQuery manual for nth-child for more info.
If this isn't what you're looking for, then I would suggest following #NielsKeurentjes advice and using multiple class names in the relevant elements.
Hope that helps.

I would change the classes, because a HTML-Tag can have multiple classes at once:
<span class="test"></span>
<span class="aaa"></span>
<span class="test testone"></span>
<span class="test testtwo"></span>
<span class="aaa-one"></span>
<span class="test testtwo"></span>
If you can't change the HTML, you can do it with javascript (jquery):
$('[class]').each(function(){
var className = $(this).attr("class");
if("test" == className.substring(0, 4)) //starts with "test"
{ doSomething();
}
});
(This code only works, if the tag has not more than one class)
But this is dirty code because it scans each dom-element which has a class.
If you only want to apply css-Style, the better solution, if you can't change the HTML, is to add all possible classes to the css-File:
.test, .test-one, .test-two{
...
}
...or using the css3-selectors as mentioned in the other answers, but older browsers won't support it.

You can use either
$("span[class*='test']"); // element with test anywhere in class attribute
or
$("span[class^='test']"); // element with test at the start in class attribute
note that these will work only if the element has single class.
however you should better use what #Niels have shown.
For a good CSS selector reference : Tutorial from net.tutsplus.com