jquery - trigger click event of div manually

Question

i have a div which has many divs.when binding the divs i create click event for each item like below

    jQuery.each(opts.items, function (i, item)
                    {
                        var image = opts.image;
                        jQuery('jQuery('<div class="' + opts.optionClassName + opts.controlId + '" id="' + item.key + '" ><img src="' + image + '" alt="checkbox" />' + item.value + '</div>')
                                .click(function ()
                                {')
                                        .click(function ()
                                        {

    //code goes here

    }

when the div is clicked in UI this gets triggered, but when i try to do it manually it does not get triggered. any help on how to trigger would be great. i hardcoded the div values and tried to call but it is of no use.

   var id1 = 'Car';
    var id2 = 'Bus';
    $('div class="CList" id="1" >' + id1 + '</div>').trigger('click');
    $('div class="CList" id="3" >' + id2 + '</div>').trigger('click');

even this

    var id1 = 'Car';
    var id2 = 'Bus';
    $('div class="CList" id="1" >' + id1 + '</div>')[0].click();
    $('div class="CList" id="3" >' + id2 + '</div>')[0].click();

Answer 1

What you have aren't valid selectors. You're passing something that's almost HTML to the jQuery function so it doesn't know what to do with it.

If the IDs for your elements are 1 and 3, then you'd just do:

$('#1, #3').trigger('click');

Perhaps a better way, if you want to simulate the click on each of them, is to iterate over your collection again:

jQuery.each(opts.items, function(i, item) {
    $('#' + item.key).trigger('click');
});