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")
}
});
Related
I am trying to hide the scrollbar when opening a fullscreen menu. That part I got working, what Im missing is getting the same button that hides the scrollbar to make it appear back again (removing the .no-scroll from the body). Here is my failed attempt, looks like the second function is not working.
$('.menu_container').on('click', function(){
$('body').addClass('no-scroll');
$('.menu_container').attr('id', 'menu_close');
});
$('#menu_close').on('click', function(){
$('body').removeClass('no-scroll');
$('#menu_close').removeAttr('menu_close');
});
Your event handlers are attached as soon as the DOM is loaded. And when this happens, there's no element with id #menu_close yet (since it's added only after you click on .menu_container), so the second event handler is not attached to anything.
You could move it up inside the first function like this:
$('.menu_container').on('click', function(){
$('body').addClass('no-scroll');
$('.menu_container').attr('id', 'menu_close');
$('#menu_close').on('click', function(){
$('body').removeClass('no-scroll');
$('#menu_close').removeAttr('menu_close');
});
});
It's because you've removed the id which is how you're finding the element.
If you want to add and remove a class that makes your scrollable use:
$( 'body' ).addClass( 'no-scroll' );
And:
$( 'body' ).removeClass( 'no-scroll' );
I have an element with a a script for a mouseover to show an image. I can't change the HTML, so is it possible to disable the javascript in the link, but still keep the link for the href intact? I cant use the id of the a element since it isn't unique.
HTML:
<div class="container">
<a id="a211094" onmouseout="etim();" onmouseover="stim('/imgs/7c24b548-4f4c-418e-ad4f-53c73cf52ace/250/250',event,this.id);" href="/products/Computers/Desktops/Acer/Acer-Aspire-TC-705W-Towermodel-1-x-Core-i3-41?prodid=211094"><img src="" alt="">
</a>
</div>
if you want to make all ancher tag or you can give class for those anchor tags on which you want to perform this and instead of $( "a" ) write $( ".myClass" )
$( "a" ).each(function( index ) {
$( this ).removeAttr("onmouseout");
$( this ).removeAttr("onmouseover");
});
use can use attr("disabled", "disable"); to disable it
Overwriting the JavaScript:
document.getElementById("a211094").onmouseover = null
document.getElementById("a211094").onmouseout = null
document.getElementById("a211094").removeAttribute("onmouseout");
document.getElementById("a211094").removeAttribute("onmouseover");
If you can consistently access and control the containing element you could try a slightly left-field approach using an onmouseover event on the container.
There's a function called setCapture() which you can call during a mouse event to "capture" all mouse events of that kind for the element it's called against, until a mouseup event or releaseCapture() is called. So you could do something like the following:
jQuery(document).ready(function() {
$container = jQuery("#<yourcontainerid>");
$container.on("mouseover", function(e) {
if (e.target.setCapture) e.target.setCapture(true);
});
$container.on("mouseout", function() {
document.releaseCapture();
});
});
The (true) argument is important (I think, without testing) as it prevents any descendent events firing, which is what you want here.
The mouseout function will then release the capture when it leaves the area of the container.
Will this work? can't say for sure, I haven't tested it in your exact case, but in theory it should!
UPDATE: you can use ".container" rather than "#yourcontainerid" in the JQuery if you so wish to enable this for everything of class container.
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();
}
});
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" );
});
I've been looking at this plugin here
http://roblaplaca.com/blog/2013/01/21/custom-styled-select-boxes/
In the instructions it says you can disable the list using this disable()
I added a button to the example 1 and have been trying to get the list to disable when the button is clicked to no avail.
I'm trying
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("customSelect").disable("custom","disabled");
});
#start being the button id I am trying to use to disable the list
What am I doing wrong here? Using example1 template.
CustomSelect is either a class or a variable; you're using it as a html element which is incorrect. Either remove the quotes (if it's a variable) or add a dot before it (if it's a class).
According to their documentation
disable() Disables interactivity
.disable() does not take any parameters as you are trying to use, instead try this:
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("customSelect").disable();
});
});
in addition, your customSelect is not a valid selector unless you have an html element named customSelect, which I doubt. More than likely its the ID of the element you want, in which case you should use:
$( document ).ready(function() {
$( "#start" ).click(function( ) {
$("#customSelect").disable();
});
});
you also may want to consider storing a reference to the list when you intialize it, much like this example from their docs:
<script>
var sb = new SelectBox({
selectbox: $("select.custom").eq(0)
});
sb.jumpToIndex(3);
sb.disable();
</script>
then you can call .disable on that reference you stored... will definately work that way.
try this one......
$("input").prop('disabled', true);
$("input").prop('disabled', false);