Dynamically formed Anchor tag not invoking the click function
<p>I have a cshtml</p>

<pre><code>&lt;td id="device-body"&gt;
    &lt;ul&gt;
        &lt;li id="devicesInOffice"&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/td&gt;
</code></pre>

<p>and i am trying to dynamically populate the li tag with a list of anchor tags(like below)</p>

<pre><code>function populateDevicesAvailable(deviceType) {  
    if (deviceType.id != "") {  
        $.post(window.getOfficesDevicesUrl, { devicetypeId: deviceType.id },   
         function (results) {  
            var items = "";  
            $.each(results, function (i, device) {
                items += 
"&lt;a id='" + device.Id + "' href= '" + "#" + "'    
                class='devices'     
                onclick='javascript:populateDeviceInfo()'&gt;" + device.Name + "&lt;/a&gt;";  
            });

            $("li#devicesInOffice").append(items);

        });
    }
    else {
        $("li#devicesInOffice").html("");
    }
};  


function populateDeviceInfo() {
}
</code></pre>

<p>The populateDeviceInfo function never gets called.I only get an error "object expected" when i click the hyperlink.</p>

<p>I also tried other ways(below) to call the function but nothing works.</p>

<pre><code>$(".devices").click(function () {
    populateDeviceInfo();
});

 $("li#devicesInOffice a").click(function () {
    populateDeviceInfo();
</code></pre>

<p>Can somebody help me to find a way to call the function.
Thanks,</p>
