递归 function 在动态创建锚标记时未在 jquery 中调用

Question

我正在动态创建一个数据表，其中将根据 object 添加不同的选项卡。

虽然选项卡正在创建但没有发生切换，因为onclick function 创建的调用没有被调用。

这是下面的代码示例和屏幕截图：

aTag = $("<a href='#' onclick='nGActiveSheet="+nTabs+";makeView1("+ data +");'>"+sCurrTab+"</a>");

makeView1 function 接受一个参数为 object

Answer 1

当您直接在元素的onclick属性中键入 javascript 代码时，它将在全局 scope 中执行。 然后它将释放对局部变量的所有引用。

在您的情况下， makeView1可能不是全局的，因此在全局 scope 中执行所有操作时未定义。

考虑以下代码段： makeView1和test都存在于全局 scope 以及本地的 IIFE 中（立即调用 function 表达式）。 但是当你点击链接时，你可以看到调用的是全局function，使用的是全局test变量（你可以点击两次验证值是否设置为1。

您还会注意到data未正确传递，当它与属性中的字符串连接时，使用了[object Object] 。

 var test = "global"; var data = { foo: 'global' }; function makeView1(_data){ console.log('global: ', _data); console.log('test: ', test); } (function(){ var test = "local"; var data = { foo: 'local' }; function makeView1(_data){ console.log('local: ', _data); console.log('test: ', test); } aTag = $('<a href="#" onclick="makeView1(\''+ data +'\');test=1;">TEST</a>'); aTag.appendTo('body'); })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在这种情况下，使用 jQuery 方式使用on('click', function)语法附加事件处理程序要好得多。 这样，处理程序 function 将“记住” scope 的创建位置，因此您不会被全局变量所困扰。

您将同时摆脱对象到字符串的转换，因为您不再为 onclick 构建字符串，而是将适当的 function 处理程序附加到事件：

 var test = "global"; var data = { foo: 'global' }; function makeView1(_data){ console.log('global: ', _data); console.log('test: ', test); } (function(){ var test = "local"; var data = { foo: 'local' }; function makeView1(_data){ console.log('local: ', _data); console.log('test: ', test); } aTag = $('<a href="#">TEST</a>'); aTag.on('click', function(e){ makeView1(data); test = 1; }); aTag.appendTo('body'); })();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>