How To Craft Links So They Are Handled By Jquery In Document.ready And Not Global Scope

I recently asked a question here: Previous question and the answer determined that my Javascript function was in Global scope and not found inside the document.ready. I am using VB

Solution 1:

You could make the style number an attribute of the anchor:

<div><aclass="product"s="STY5901"href="javascript:void(0);">Green T-Shirt</a></div><div><aclass="product"s="STY5915"href="javascript:void(0);">Red T-Shirt</a></div>

And then get the attribute value in the click event:

$(document).ready(function(){
    $(".product").click(function(){
        showProductPopup($(this).attr("s"));
    });
});

functionshowProductPopup(s){
    console.log("called showProductPopup with value: " + s);
}