帶有2個參數onclick的調用函數

Question

我想從包含2個參數的動態創建的元素中調用函數，但是通過合並這兩個參數，它僅作為參數發送它。

 $("#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); } 

 <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> 

請幫忙

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);
});

這是一個工作示例：

演示