jQuery: Triggering a click on an img not working

Question

I'm testing in Chrome.

I have a bunch of 'add item' icons on screen that the user can click in order to add that one item to the database. I also have a button at the botton of that list, which should add the whole list of items.

It seems to me that the easiest way to do this is to trigger the 'click' event for all these icons (the reason I'm doing it via the icons is that items-specific values are stored as attributes of the div in which the icon resides).

However, I can't get it to work: the event handlers for the individual icons work perfectly, and the event handler for the add-them-all button does give me an alert if I put that in. But if I add the trigger ('click') command, I don't get no beef.

I tried triggering the click for just the first of the icons by adding ':first' to the selector, but that didn't help.

$(function(){
    $('#addAllItemsButton').click(function() {
    alert("Caught your button click");
    $('.addItemIcon').trigger('hover');
});

I read some posts that suggest browsers don't allow you to trigger click events, so I added a 'hover' event listener to the icons to see if the problem is in the type of event I want to trigger. Answer: no, same story; the alert will work, but the trigger won't.

I have placed the icon event listener in the code before the button event listener.

What's going on? Thanks for any hints.

Answer 1

first of all, be sure that the selector is valid, eg:

$(function() {
    $('#addAllItemsButton').click(function() {
        var icons = $('.addItemIcon');
        alert(icons.length);
     });
});

it should give you at least 1

btw - i experienced some issues with hover. you might go for mouseenter/mouseleave