Question

在我的jsp文件中

$(document).ready(function() {

alert("inside");//this prints
function addToCompare(productID) { alert("productID"); //this does not

}

});

<!-- JSP -->
<input type="checkbox" id="check${productData.productID}" onclick="addToCompare(${productData.productID});"/>Add to compare

我在这里缺少任何语法吗？请帮忙。

Answer 1

您面临范围问题，您的功能范围有限。

选项1：将您的功能移到文档就绪回调之外。

function addToCompare(productID){
  alert(productID);
}

$(document).ready(function(){
   /* to do */
});

选项2：将您的功能公开到全球范围。

$(document).ready(function(){
  function addToCompare(productID){
    alert(productID);
  }
  window.addToCompare = addToCompare; /* exposed */
});

编辑：

未捕获参考错误：未定义P0001。 P0001是productData.productID
的值

您需要使用\"转义字符串值，或者只使用'

选项1：onclick="addToCompare(\"${productData.productID}\");"

选项2：onclick="addToCompare('${productData.productID}');"

Answer 2

这里有很多人。

您描述的问题是由于addToCompare函数在创建HTML时超出范围，不仅因为它是在onReady函数的本地声明，而且几乎肯定不会存在。处理HTML。

你也会让自己头疼，因为JSP在解释addToCompare(${productData.productID})时可能不会添加引号。此外，将元素的ID放在onClick处理程序中是多余的，因为将在处理程序中设置this，更不用说在HTML中设置onClick处理程序被视为bad practice

要解决这些问题，您可以在文档/窗口范围内声明该函数，然后在文档准备就绪时将其附加到产品的单击处理程序复选框。

由于您并不真正需要业务逻辑的DOM id属性，因此您可能需要考虑将产品ID提供为纯粹的数据属性 - 有助于保持层之间的分离。

function addToCompare() {
    console.log("Product ID: "+ this.id);
    console.log("Product ID: "+ this.dataset.productId);
}

$(function() {
    $('.productCheckbox').click(addToCompare);
    console.log("Document is ready");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input     type="checkbox"
          class="productCheckbox"
             id="whateverTheJSPputsHere"
data-product-id="theProductID"
/> Add to compare

JSP代码（没有id）：

<input type="checkbox" class="productCheckbox" data-product-id="${productData.productID}"/>Add to compare

无法调用动态生成的复选框的jquery onclick

2 个答案: