JQuery conditional handler

Question

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?

Why do you want the click handler to be attached to the element even before it is appended to the DOM. ? — NishiJain, Oct 03 '17 at 06:03
and what make event listener on li and check it in method ...? eg. if(!$(this).attr('xx')) return false; — daremachine, Oct 03 '17 at 06:04
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Yuriy Rozhovetskiy, Oct 03 '17 at 06:06
@YuriyRozhovetskiy Thanks, but no. This is not the issue. I guess I stated my problem incorrectly. — yPhil, Oct 03 '17 at 14:35

Kresimir Pendic · Answer 1 · 2017-10-03T07:02:56.230

4

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

edited Oct 03 '17 at 07:02

answered Oct 03 '17 at 06:08

Kresimir Pendic

3,458
1
18
25

But this fires on `[aria-selected='false']` too (yes, even with `el.preventDefault()` :( – yPhil Oct 03 '17 at 06:17
hm,, this peace of code does not do that, I will try to put some code inline for you to test it – Kresimir Pendic Oct 03 '17 at 06:32
Your code is ok, only there seems to be an asynchronous call, and in between the click on a "non selected" tab and the function call, somehow the attribute is already set. I think I need a callback, but I'm not sure it's possible. – yPhil Oct 03 '17 at 06:38
1

ditch this method completely and use documentation from here: http://api.jqueryui.com/tabs/, there are bunch of methods that you can put your logic there.. – Kresimir Pendic Oct 03 '17 at 06:59
can you share url of the page? – Kresimir Pendic Oct 03 '17 at 17:43

score 1 · Answer 2 · answered Oct 03 '17 at 06:09

1

You probably want to delegate the click handler.

$('.container').on('click', '[aria-selected=true]', function () {
  // Do something.
});

answered Oct 03 '17 at 06:09

dork

3,438
2
20
46

score 1 · Answer 3 · answered Oct 03 '17 at 06:16

1

try this ..

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

answered Oct 03 '17 at 06:16

Rahul

41
1
6

This too fires on all `li` elements – yPhil Oct 03 '17 at 06:19

JQuery conditional handler

3 Answers3