Javascript 如何创建链接，以便JQuery在document.ready而非全局范围内处理它们

我最近在这里问了一个问题：

答案确定我的Javascript函数在全局范围内，在document.ready中找不到。我正在使用VB.NET构建显示的链接，其中一些代码如下：

sb.Append("<div class=""img-thumbnail"">")
                sb.Append("<a href=""javascript:productPopup('" & Trim(dr.Item("StyleDescription")) & "');"" class=""thumbnail""><img src=""http://placehold.it/100x100"" /></a><h4 class=""thumbnail caption"">" & dr.Item("StyleDescription") & "</h4>")
                sb.Append("<center>" & dr.Item("ststy") & "</center><br />")
                sb.Append("<center>Price: " & FormatCurrency(dr.Item("lowprice"), 2) & " MSRP: " & FormatCurrency(dr.Item("lowMSRP"), 2) & "</center>")
                sb.Append("</div><!-- thumbnail --></div><!-- col-md-2 -->")

sb.追加（“”）
sb.追加（“&dr.Item”（“StyleDescription”）&”）
sb.追加（“&dr.Item”（“ststy”）和“
”）
sb.追加（“价格：”&FormatCurrency（dr.Item（“lowprice”），2）和“MSRP:”&FormatCurrency（dr.Item（“lowMSRP”），2）和“）
某人加上（“”）

现在我被告知，为了将我的函数放在document.ready中，我应该使用JQuery来处理链接的点击。我的问题是：

我需要将StyleDescription传递给函数，以便使用AJAX从数据库中获取与该产品相关的数据。我如何设计JQuery，使其无论单击哪个链接都能正确地获取此信息？因此，假设我有以下链接：

<a href="javascript:showProductPopup('STY5901');">Green T-Shirt</a>
<a href="javascript:showProductPopup('STY5915');">Red T-Shirt</a>

---

我如何将其转换为让JQuery处理它，并且仍然获得正确的StyleDescription值，如上面的链接所示？

您可以将样式编号作为锚定的属性：

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

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

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