Question

我想从动态创建的元素中调用一个包含2个参数的函数，但它只是通过合并这两个参数将其作为唯一参数发送。

＆＃13;

$("#click").click(function(){
  var td = document.createElement('div');
  var num1 = 10;
  var num = 5;
  td.innerHTML = "new";
  $(td).attr('onclick','updateDistance("'+num1+','+num+'")');
  document.getElementById("div1").appendChild(td);
})

function updateDistance(id,distance){
  alert(id+","+distance);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id = "div1">
  Text here
</div>
<button id = "click">CLick here</button>

＆＃13;

请帮助

Answer 1

这是因为你的

$(td).attr('onclick','updateDistance("'+num1+','+num+'")');

正在创建这样的脚本

updateDistance("10,5")

只是一个中间有逗号的字符串。一个参数。你想创建这个：

updateDistance("10","5")

所以为此你必须这样做：

$(td).attr('onclick','updateDistance("'+num1+'","'+num+'")');

请注意我在哪里添加了引号。

顺便说一下，作为数字，你可以避免使用引号：

$(td).attr('onclick','updateDistance('+num1+','+num+')');

这将创造这个：

updateDistance(10,5)

所以它们作为数字而不是字符串传递。 "10"和10之间存在很大差异（没有引号）。

此外，您可以附加一个直接调用该函数的click事件，而不需要任何黑客攻击：

$(td).on('click', function() { updateDistance(num1, num); });

如果您创建了大量元素并且在点击上下文之外遇到变量值问题，请查看我最近写的这个答案：https://stackoverflow.com/a/42283571/1525495

Answer 2

你只需要在一个函数中调用它：

更改

$(td).attr('onclick','updateDistance("'+num1+','+num+'")');

对此：

$(td).click(function() {
    updateDistance(num1,num);
});

如果您的两个参数是动态的，您可以将它们分配给对象td并重复使用。

$("#click").click(function(){
  var td = document.createElement('div');
  td.id = 10; // or however you calculate this value
  td.distance = 5; // or however you calculate it.
  td.innerHTML = "new";
  $(td).click(function() {
      // extract the dynamic value and call the function with it.
      var id = this.id;
      var distance = $(this).prop("distance");
      updateDistance(id,distance);
  });
  document.getElementById("div1").appendChild(td);
});

这是一个工作示例：

Demo

调用具有2个参数的函数onclick

2 个答案:

这是一个工作示例：