jquery - Dynamically chosen click event not working

Question

So I have a few things going on:

1. A variable is being set with the value of something in the database. ("brown")

2. I run a function that finds the code associated with that haircolor. ("d")

3. I simulate a click on a div with the id of that code.

Here is my code:

var dbHair = "<?=$myHair?>";
var dbEyes = "<?=$myEyes?>";

var eyeCode = hairEyesFind(dbHair);
var hairCode = hairEyesFind(dbEyes + "2");
var block = "#" + eyeCode + ".pickerOpt";

console.log(block); // LOG A
console.log($(block)); // LOG B

$(block).click();

Log A returns `"#d.pickerOpt".

Log B returns [li#d.pickerOpt, prevObject: jQuery.fn.jQuery.init[1], context: document, selector: "#d.pickerOpt", jquery: "1.9.1", constructor: function…].

Here is the HTML I am trying to perform the .click() on:

<div class="modelblock" style="width: 212px; height: 65px;">
    <ul id="hair" class="picker">
        <li id="z" class="pickerOpt"><span>.</span></li>
        <li id="b" class="pickerOpt"><span>.</span></li>
        <li id="c" class="pickerOpt"><span>.</span></li>
        <li id="d" class="pickerOpt"><span>.</span></li>
        <li id="e" class="pickerOpt"><span>.</span></li>
        <li id="f" class="pickerOpt"><span>.</span></li>
    </ul>
    <h3>Hair</h3>
</div>
<div class="modelblock" style="height: 65px; width: 142px;">
    <ul id="eye" class="picker">
        <li id="g" class="pickerOpt"><span>.</span></li>
        <li id="h" class="pickerOpt"><span>.</span></li>
        <li id="i" class="pickerOpt"><span>.</span></li>
        <li id="j" class="pickerOpt"><span>.</span></li>
    </ul>
    <h3>Eyes</h3>
</div>