Tag: click
Nabin Nepal (Starx) click coffeescript jquery
March 18, 2013

JQuery on click not working

Question by Jamie Fearon

Jamie FearonJamie Fearon

I’m having strange behaviour where within the same file a change event is working but a click event isn’t. I understand I may have not posted enough code, but I just want to see if anyone knows why on event may work but another will not. Here is my code:

class AddBTS
  constructor: () ->

    $('#a').on 'change', (evt) => @a evt
    $('#b').on 'change', (evt) => @b evt
    $('#c').on 'click', (evt) => @c


  a: (evt) =>
    console.log 'a works'

  b: (evt) =>
    console.log 'b works'

  c: () =>
    console.log 'c works'

The html it refers to:

<input type="file" id="a">
<input type="file" id="b">
<button id="c">OK</button>

The events work fine on a and b, but the click event doesn’t work on c.

My compiled JS is executed after the DOM loads.

Could anyone give me some pointers on what may cause this and I will try it out.

Interestingly, when I double click on c I get the following error:

Error in event handler for 'undefined': IndexSizeError: DOM Exception 1 Error: Index or size was negative, or greater than the allowed value.

Answer by user1737909

user1737909user1737909

You have to call your c function :

@c()

Without parens, you’re only accessing it. Remember, CoffeeScript isn’t Ruby ;).

Answer by Starx

StarxStarx

I dont think you need the evt since you are not using it.

$('#c').on 'click', () => @c
Nabin Nepal (Starx) click javascript jquery simulation
April 29, 2012

simulate click to view tab when function is run

Question by Michael

MichaelMichael

I am using the following tabs in a project :

//Tabs
$('ul.tabs').each(function(){

  var $active, $content, $links = $(this).find('a');

  $active = $links.first().addClass('active');
  $content = $($active.attr('href'));

  $links.not(':first').each(function () {
    $($(this).attr('href')).hide();
  });

  $(this).on('click', 'a', function(e){

    $active.removeClass('active');
    $content.hide();

    $active = $(this);
    $content = $($(this).attr('href'));

    $active.addClass('active');
    $content.show();

    e.preventDefault();
  });
}); //End Tabs

and the HTML is as follows:

<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'></div>
<div id='tab2'></div>
<div id='tab3'></div>

The problem I am having is that I want to run a function within the active tab, and then automatically select another tab where the results of the previously executed code will appear.

I am unsure how to go about simulating a click in order to automatically select the next tab, so any help will be greatly appreciated!

Thanks in advance.

Answer by Starx

StarxStarx

A simple way to simulate a click, is using .trigger()

$("#tab2").trigger("click"); //when you need in the function
Nabin Nepal (Starx) click jquery
March 21, 2012

Jquery click event is not fired every time on all LI element of UL tag

Question by Rama Rao M

Rama Rao MRama Rao M

Hi,

I have created drop down.A div tag contains ul which has list items.Whenever user clicks on the li element,that value has to be updated in the input box.The problem is click event is not fired on some of li elements.In first case, I put 3 LI elements,out of these only top two elements firing event but no last one.In second case, I changed LI elements to 5.Now only first 3 elements firing but not last 2.
Out f 8 elements 5 elements firing,but not last 3 elements. I am really confused with this behavior. What could be the wrong in my code..Here is the link .Can you please help me….

Answer by codef0rmer

codef0rmercodef0rmer

The following line in your code causing a problem: (I do not think it is needed as you have $(html).click() event too)

$('.irmNDrdnInput').blur(function(){
    drndValId = 'drdn-val-'+$(this).attr('id').split('-')[2];
    $('#'+drdnValId).slideUp(300);
});

Demo: http://jsfiddle.net/6Kd67/5/

For tab-press, you can track the keyCode inside $('.irmNDrdnInput').keydown() event : 

if (event.keyCode === 9) {
    $('.irmNDrdnVal').slideUp(300);
    return false;            
}

Demo: http://jsfiddle.net/6Kd67/7/

Answer by Starx

StarxStarx

Why are over complicating this effect? Keep it Short and Simple (KISS)

I created a simple demo for a previously asked question, check it here.

Another demo with slide in effect.

Update

Your blur function is creating problem, since more than one event is being triggered at the same time, specially the $('html').click(), the effect is overlapping. Add a slight delay to get everything working

/*Close value popup of the element which has lost focus*/
$('.irmNDrdnInput').blur(function(){
    drndValId = 'drdn-val-'+$(this).attr('id').split('-')[2];
    $('#'+drdnValId).delay(100).slideUp(300);
});

Working DEMO

Nabin Nepal (Starx) click hover jquery toggle
December 30, 2011

Remove/Add hover after toggle Jquery

Question by hyperrjas

hyperrjashyperrjas

I have this css:

.disable {
          properties
          }

.comment_action:hover {
                       properties
                       }

I have this jQuery:

//comment button index disable
$("#mydiv").toggle(function() {
 $(this).find(".comment_action").addClass('disable');   
},
function(){
 $(this).find(".comment_action").removeClass('disable');
});

The problem for me is that when I doing click the .comment_action:hover is not disappear or removed. I want that If I doing click on the class .comment_action:hover dissapear and if I doing click again the .comment_action:hover appear.

Answer by lawrence.alan

lawrence.alanlawrence.alan

You would need an !important added to properties you want to override in the :hover psuedo-selector…

Because :hover takes precedence, even if .disabled is applied.

Also your javascript should be calling find with .comment_action instead of comment_action

See working example: http://jsfiddle.net/TN4rh/11/

Answer by Starx

StarxStarx

Better solution would be toggle the class. What you are trying to do can be done in one line. 

$("#mydiv").click(function() {
    $(this).find(".comment_action").toggleClass('disable');       
});

Demo

🙂

...

Please fill the form - I will response as fast as I can!