如何检测点击了哪个动态按钮?
***注意:***#dCalc
元素是动态添加的...
<!-- STATIC -->
<div id="dBlock">
<!-- ADDED DYNAMICALLY -->
<div id="dCalc">
<input id="firstNumber" type="text" maxlength="3" />
<input id="secondNumber" type="text" maxlength="3" />
<input id="btn1" type="button" value="Add" />
<input id="btn2" type="button" value="Subtract" />
<input id="btn3" type="button" value="Multiply" />
<input id="btn4" type="button" value="Divide" />
</div>
</div>
5条答案
按热度按时间uurity8g1#
hc2pp10m2#
vd8tlhqk3#
由于块是动态添加的,您可以尝试:
演示http://jsfiddle.net/yDNWc/
bvjveswy4#
jQuery可以绑定到单个input/按钮,也可以绑定到表单中的所有按钮。一旦单击了某个按钮,它将返回所单击按钮的对象。在那里,您可以检查属性,如value...
2vuwiymt5#
检测动态创建元素上的事件
前面有两个例子,jQuery和 * vanilla*JavaScript:
jQuery
对委托事件使用. on()方法,该方法遵循以下语法:
示例:
x一个一个一个一个x一个一个二个x
JavaScript语言
在 * vanilla * JavaScript中也可以像下面这样实现,不同之处在于JS没有 * delegateTarget * 的概念(这是他们专有的Event对象上的jQuery属性),因此进行了轻微的修改:
一个三个三个一个
正如您所看到的,上面的实现都不单独依赖于
Event.target
元素 * 本身 *,原因是如果我们在按钮内有一个图标(如:<button id="add" type="button">Add <i class="icon-plus"></i></button>
),如果点击直接落在图标上,Event.target
将最终成为图标,而不是按钮元素-我们可能会错过检索所需的数据,如特定的按钮ID等,导致应用程序逻辑中断。