如何在javascript中访问动态创建的对象？答案

【问题标题】：How to access dynamicly created objects in javascript?如何在javascript中访问动态创建的对象？
【发布时间】：2012-09-28 10:47:20
【问题描述】：

我创建了一个动态表，我想在 javascript 中访问创建的对象之一。例如：如何处理动态创建的按钮？

<script type="text/javascript">
function myJavaScriptFunction()
{ 
 //How do I know here which button triggered the function?
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction()"/>
   </td>
 </tr>
<% } %>
</table>

提前谢谢你 /约翰

【问题讨论】：

你想用 Javascript 还是 ASP 访问这个动态创建的内容？
你是如何创建动态控件的？在代码隐藏中？还是在 javascript 中？
我想访问 Javascript 中动态创建的内容。
动态控件在代码隐藏中创建。

标签： c# javascript asp.net dynamic

【解决方案1】：

将参数映射为对象：

function myJavaScriptFunction(object)
{ 
 //How do I know here which button triggered the function?
    var id = object.id;
}

在您的 HTML 中，您需要执行以下操作：

onclick="myJavaScriptFunction(this)"

这是你调用函数的地方，你传入this关键字作为参数。

关键字this 指的是执行调用的任何HTML 元素，即您单击的任何按钮。该对象具有您在函数中定义为object.id 的属性id。属性id的值基本上就是输入标签的“id”字段。

把它们放在一起，你会得到：

<script type="text/javascript">
function myJavaScriptFunction(object) // You're defining the function as having a parameter that it accepts. In this case, it accepts an object.
{ 
   alert(object.id); // Alert the object's id.
   // Do what you want with object.id
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction(this)"/>
   </td>
 </tr>
<% } %>
</table>

【讨论】：

【解决方案2】：

将按钮元素作为参数传递给函数

<script type="text/javascript">
function myJavaScriptFunction(button)
{ 
 //button triggered the function
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction(this)"/>
   </td>
 </tr>
<% } %>
</table>

【讨论】：

【解决方案3】：

<script type="text/javascript">
function myJavaScriptFunction(button)
{ 
   alert($(button).attr('id')); // gets the id of the button that called the function
}
</script>

<table>
<% for (var i=0; i<10; i++) { %> 
  <tr class="rowcell">
   <td class="datacell">
   <input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction(this)"/>
   </td>
 </tr>
<% } %>
</table>

【讨论】：

【解决方案4】：

在javascript中，像这样

var elem = document.getElementById("button-no-1");

【讨论】：

是的，你会提前硬编码所有可能的动态按钮，对吧？
@walther，您显然错过了重点，即展示您将如何做到这一点，而不是提供完整的解决方案。
@JustinHarvey，并不是说你必须把它放在银盘上，但可能会展示一个基本的想法。您的示例没有显示任何内容，除了最基本的静态元素检索，这在这种情况下完全没用。 John 需要一种方法来获取具有未知 ID 的元素，因为它是动态创建的。你向他展示了如何找到一个静态元素。了解其中的区别吗？

【解决方案5】：

您可以按如下方式更改您的代码：

<input type="button" id='<%="button-no-"+i%>' value="myButton" onclick="myJavaScriptFunction('<%="button-no-"+i%>')"/>



<script type="text/javascript">
function myJavaScriptFunction(buttonId)
{ 
 //How do I know here which button triggered the function?
}
</script>

【讨论】：

【解决方案6】：

你应该知道按钮 id：

var button = document.getElementById("button-no-1");

【讨论】：

是的，你会提前硬编码所有可能的动态按钮，对吧？