Develop Reference

JQuery conditional handler

I need to select a li element based on a "aria-selected" attribute that is affected to this element after its initialization by a plugin (specifically, it's a JQuery UI tab element, I want to handle the click on "selected" tabs, and those tabs are added to the DOM dynamically) so I would do this :
$("[aria-selected='true']").on('click').method(...);
But I need to attach this handler when the element is created, after which it's too late ; I'm creating the element like this:
var $thisTab = $('<li></li>');
So I need a way to say "attach this handler to this element, but fire it only if it has this attribute, something like:
$thisTab.withClass("[aria-selected='true']").on('click').method(...);
See, this li contains a <a href>link</a> that is "disabled" by the plugin when the tab is "aria-selected". So I cannot just bind the event and test for the attribute, otherwise I'll break the a link on non-selected tabs ; I hope I'm making sense.
How can I do that?

this should work for you
$("body").on('click', "[aria-selected='true']", function(el){
// ..method
}
you need to scope your 'future' element to some perm element, like body, document etc..
UPDATE:
if you need to do something after TAB element is created then use something like:
$( ".selector" ).tabs({
create: function( event, ui ) {}
});
or you need to change something when tab is selected use something like:
$( ".selector" ).tabs({
activate: function( event, ui ) {}
});
hth, cheers

You probably want to delegate the click handler.
$('.container').on('click', '[aria-selected=true]', function () {
// Do something.
});

try this ..
var $thisTab = $('<li></li>');
$thisTab.on('click', function(){
var d = $(this).attr('aria-selected');
if(d=="true") {
console.log("here")
}
});

How can I show a DIV by it's attribute value using Jquery

I am working with a Jquery plugin and I would like to trigger the modal (div) by calling it's value instead of calling it's ID name.
So if the attribute value is "554" meaning attrId="554" I will display the modal with the matching "554" attribute. Please keep in mind that the attribute value could be a variable.
My JSFiddle Code Example is here
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
Any help is appreciated. Thanks so much

You can use an attribute equals selector: [attribute="value"]
If your popup div has an attribute like this:
<div id="element_to_pop_up" attrId="554">
<a class="b-close">x</a>
Content of popup
</div>
You can use the following:
var x = '554';
$('div[attrId="' + x + '"]').bPopup();
jsfiddle

Ultimately it needs a unique selector unless you are okay with triggering multiple modals. One way to do it is to use the jQuery each function, and check each div for the matching attribute.
$( "div" ).each(function() {
var criteria = 'example_criteria';
if ($( this ).attr( "attributename" ) == criteria)
{
$(this).bPopup();
}
});

jquery .click() event.preventDefault() not working

I'm building a web application that is extendable by dropping scripts into a preset directory. The script needs to read file headers before going to a page, so I need to use .preventDefault() when links are clicked and run some JScript first. Unfortunately I can't get past the .preventDefault()
Here's my link format:
Some Text
here's the jquery I'm trying to use to stop the default action:
$( '.filelink' ).click( function( e ) {
e.preventDefault();
//do some other stuff here
});
EDIT:
More Info:
The <script>...</script> is in my footer.
This function is INSIDE $(document).ready AFTER a $.ajax call that builds the list of links this function is trying to listen for clicks of.

Since your links are appended dynamically to the page, you need to use document.on() to capture the click events.
the syntax for appending event listeners to dynamic content is as follows
$(document).on( event, selector, callback );
so your click handler would become:
$(document).on('click','.filelink',function(e){
e.preventDefault();
//code here
return false;
});

I think you missed
$(document).ready()
Please update your code as following:
$(document).ready(function(){
$( '.filelink' ).click( function( e ) {
e.preventDefault();
//do some other stuff here
});
})

is your code surrounded by:
$(function(){
//your code here
});
? or
$(document).ready(function(){
//your code here
});
? , because you should wait until the <a></a> element is ready before adding your click listener to it. try the code above or place your code at the bottom of the html right before the </body> tag or just right after the <a></a> element. that should work
EDIT: since your links are added dynamically call your $( '.filelink' ).click() function right after they are added

I had the same problem, because I changed the window.location.search in my event handler:
$( '.filelink' ).click( function( e ) {
e.preventDefault();
window.location.search = "something";
});
To fix my problem I used window.location.hash (which is more what I wanted anyway).

For me, the issue was a syntax error in the Javascript code.
I substituted a php variable to one of the JS variable like below,
var myvar = "<?php echo $myvar; ?>";
which produced the below result,
var myvar = "value in "myvar" which is not escaped";
It worked when I escaped the variable.
Please check if there is any syntax error in your code.

use jquery to add event to a element based on href

I would like to trigger a javascript function when a specific URL is available on the page.
The url looks like:
I would like to use jQuery to detect the url and launch an event.
I have come this far:
$( 'a[href="https://www.mypage.com/my-page/details.jsp"]' ).bind( "click", function() {
alert( "yoehoe" );
});
But it doesn't trigger the alert on a click. on the specific href. Can anyone help me on this one?

You need to wrap the code in document.ready to ensure that event gets bind to respective elements once they are there on page.like this:
$(document).ready(function(){
$( 'a[href="https://www.mypage.com/my-page/details.jsp"]' ).bind( "click", function() {
alert( "yoehoe" );
});});
Demo
Alternatively, You can also use .on() with .click if dom is generated dynamically.like this:
$(document).on("click",'a[href="https://www.mypage.com/my-page/details.jsp"]',function() {
alert( "yoehoe" );
});

Double click function in jQuery is not working

I have two span elements in a page. when I call a jquery double click function on both then the function is called only on first element. I am using the following code:
<span id="shiftTime_1">1</span>
<span id="shiftTime_2">1</span>
and jquery function is:
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
when I double click on the element Id of shiftTime_1. then the function works fine. But when I double click on element Id of shiftTime_2 then this function does not respond.
Please help.
Thanks

Use .on if you plan to add elements dynamically (e.g. by using $( "body" ).append( "<span id='shiftTime_2'>1</span>" ); )
$( "body" ).on( "dblclick", "span", function() {
alert( "This works also with dynamically added elements" );
} );

try use inside $(document).ready()
$(document).ready(function(){
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
});

When I try the code, it works just fine:
http://jsfiddle.net/Guffa/pfQfK/
Check if there is something different from your code.