在Jquery事件处理程序中无法访问的文档中声明的变量

Question

var ay = 0;
$(document).ready(function() {
    var ax = 0;
    $(document).on("click", "a[href$=#icom_add_to_cart]", function(event) { 
        event.preventDefault();
        console.log(ax); // not accessible
        console.log(ay); // accessible
}

请帮助我理解为什么ax无法访问，并且可以在onclick事件处理程序中访问。 我有一个变量，我必须在document.ready内部的多个onclick处理程序中访问。如何声明此变量是最佳做法。

正如您在调试位置看到的那样，'prods'可用但'catIds'未定义。

Answer 1

除了不使用});关闭您的脚本外，它可以正常工作，虽然我不理解您的锚点，所以我在代码段中更改了它们。

段

var az = 3
$(document).ready(function() {
  var ax = 2;
  var ay = 1;
  $(document).on("click", "a[href^=#add]", function(event) {
    event.preventDefault();
    console.log(ax);
    console.log(ay);
    console.log(az);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href='#add1'>+1</a>
  </li>
  <li><a href='#add2'>+2</a>
  </li>
  <li><a href='#add3'>+3</a>
  </li>
  <li><a href='#add4'>+4</a>
  </li>
  <li><a href='#add5'>+5</a>
  </li>
</ul>

Answer 2

很奇怪，它对我来说很好用

var ay = 5;
$(document).ready(function() {
    var ax = 6;
    $(document).on("click", "html", function(event) { 
        event.preventDefault();
        alert(ax); // accessible
        alert(ay); // accessible
    })
})

https://jsfiddle.net/Lqn2t9bs/