How to bind click event with jQuery autocomplete?

Question

I am creating a searchbox by using jQuery autocomplete.I want to trigger a click event when I click on a corresponding li from the autocomplete list. I am writing as:

  $('.ui-menu-item').click(function(){
                 $('.college').trigger('click');
  });

But It is not working. any Idea ? jsFiddle : http://jsfiddle.net/hn838/

Your code should work plenty fine. What kind of element is .college? — Ian
– Ian, Commented Apr 26, 2013 at 20:14
@lan .college is a div, in which I have a click event, but It is not firing in case of $('.ui-menu-item'). Otherwise it is working fine. — Anshul
– Anshul, Commented Apr 26, 2013 at 20:17
Does the handler for <div class="college"/> work as expected when you actually click on the div? — a better oliver
– a better oliver, Commented Apr 26, 2013 at 20:25

Ian · Accepted Answer · 2013-04-26 20:50:17Z

4

At the time your event binding is executed there will be nothing to bind it to because there has been no .ui-menu-item created in the DOM.

You need to code your event as such:

$('.ui-autocomplete').on('click', '.ui-menu-item', function(){
    $('.college').trigger('click');
});

Here is the jsfiddle: http://jsfiddle.net/hn838/4/

edited Apr 26, 2013 at 20:50

Ian

51k13 gold badges104 silver badges111 bronze badges

answered Apr 26, 2013 at 20:41

Christopher.Cubells

92110 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ian Over a year ago

The second parameter doesn't make sense. It should be a selector, not a jQuery object

Ian Over a year ago

@Christopher.Cubells I already updated. It works because it interprets the second parameter as a different on overload and passes it as data. This event handler you've is basically just a click handler for .ui-autocomplete

Anshul Over a year ago

@lan How it should be like ?

Ian Over a year ago

@pandit I updated the answer and fiddle. It was very close, and worked (obviously), but wasn't doing what was intended.

Doug Over a year ago

Excellent - this helped me. I've got a 'combobox' handler in a generic js file, and individual js files for specific pages. This snippet allowed me to add this functionality to my individual pages and customise for a specific task. Thanks.

Collectives™ on Stack Overflow

How to bind click event with jQuery autocomplete?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related