simple jquery live(click) not working for some reason

Question

If you check out http://social.allthingswebdesign.com, click the "get social" link and there are 6 icons. I'm trying to make the triangle appear under the icon is clicked.

I started with the code below, but I can't get anything to appear in the console in firebug. What's my deal?

$('.pic').live('click', function() {
    console.log('in here???');
});

are you adding ".pic" dynamically to the page? If not you can not use live(), your should use bind(), or click() — Mo Valipour, Jun 23 '11 at 23:07
@valipour .live() works through event delegation. It doesn't matter if the object is there before or after the event is bound. — djlumley, Jun 23 '11 at 23:11
**Don't use `live`.** Be a man and `delegate` instead. `$('#idTabs').delegate('.pic','click', function() { . . .` Some discussion: http://stackoverflow.com/questions/4204316/jquery-live-vs-delegate — Levi Morrison, Jun 23 '11 at 23:19
@Levi Morrison that won't help at all in this case. The "click" events are being killed by that "idtabs" plugin, so neither ".live()" nor ".delegate()" will work. — Pointy, Jun 23 '11 at 23:24
@Pointy, I know. That's why its a comment, not an answer. (Almost) no one should be using `live` anymore. I'm just trying to spread the awareness. — Levi Morrison, Jun 23 '11 at 23:27
Just a thought, but you need to look into one of the javascript templating libraries if you're going to have that much inline JS-HTML. Go with jQuery's template() functions to render all that html, doin it the way you're doing it is quite hard to maintain in my opinion. — nzifnab, Jun 23 '11 at 23:29

Pointy · Accepted Answer · 2011-06-23T23:22:29.710

2

I think the problem is very likely to be that that "tabs" plugin is killing your "click" events, preventing them from bubbling up to the body.

edit — it appears that that "tabs" plugin allows you to give it a "click" handler, which should I think return "true" to make it work:

$("ul.idTabs").idTabs({
  click: function() {
    console.log('in here???');
    $('#innest .idTabs li a').remove('#triangle');
    $(this).append('<img id="triangle" src="triangle.png" />');
    return true; // I think
  }
});

I don't know why you'd add all that HTML dynamically. Why not just include it directly into the page and hide it until you need it? It's really messy and error-prone to include lots of markup like that in the middle of your JavaScript code.

edited Jun 23 '11 at 23:22

answered Jun 23 '11 at 23:07

Pointy

405,095
59
585
614

It's basically a plugin i'm developing that hasn't been packaged up yet. Do you have any ideas on how I can still get the triangle to appear under the icons when clicked? – Catfish Jun 23 '11 at 23:17
Where the heck did you see something about a click event handler? I see next to no documentation on the idTabs website. I don't feel like that plugin is at all necessary, it takes a whopping 2 lines of code to make it work without using a silly plugin. – nzifnab Jun 23 '11 at 23:44
Click on the "Advanced" tab. There's also a source viewer. I agree however that that site leaves a lot to be desired. – Pointy Jun 23 '11 at 23:45
I wasn't sure how to create the tabs at the time and this plugin seemed simple enough. I got it so the triangles appear using your code, but I can't get any of them to remove on click. – Catfish Jun 23 '11 at 23:50

score 1 · Answer 2 · answered Jun 23 '11 at 23:42

1

Drop idTabs and go with this:

$('.pic').live('click', function(){
  $('.contentArea').hide();
  $('#' + $(this).attr('href')).show();

  // Your triangle logic goes here.
});

answered Jun 23 '11 at 23:42

nzifnab

15,876
3
50
65

score 0 · Answer 3 · answered Jun 23 '11 at 23:21

It's your idTabs plugin causing the problem, taking that out writes out the console.log.

I tried using the beta version from the dev's website but that continued to stop the rest working.

I would be tempted to write your own jQuery to do what you want, it will only be a few lines compared to a big plugin, and you can be sure it won't mess up anything else.

simple jquery live(click) not working for some reason

3 Answers3