我的锚属性的动态onclick没有启动

My dynamic onclick for my anchor attribute not firing

本文关键字：启动 onclick 动态 属性 我的      更新时间：2023-10-22

我的jQuery将onclick事件添加到动态anchor标记中，当用户单击anchor标记时，它将传递被单击的anchor标签的id。我的剧本有问题吗？

抱歉，我刚开始使用3天前开始使用的javascript。

jQuery('#WMVideoxx').on('click','a',function(e){
   e.preventDefault();
   MyFunction(jQuery(this).attr('id'));
}); 
function MyFunction(anchor)
{
}

这个怎么样

$('#WMVideoxx').html('<a id="youFoundMe">Dynamic Anchor</a>').on('click', 'a', function(e) {
  e.preventDefault();
  alert($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="WMVideoxx" style="height:100px; width:300px;">
</div>

它运行得很好，就像这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
  jQuery('#WMVideoxx').on('click','a',function(e) {
    e.preventDefault();
    MyFunction(jQuery(this).attr('id'));
  }); 
});

function MyFunction(anchorId) {
  alert(anchorId);
}
</script>
<div id="WMVideoxx" style="height:100px; width:300px;">
  <a href="#" id="anchor1">1</a><br/>
  <a href="#" id="anchor5">5</a><br/>
  <a href="#" id="anchor17">17</a><br/>
  <a href="#" id="anchor32">32</a><br/>
  <a href="#" id="anchor55">5</a><br/>
</div>

好的，这是一个添加了锚的按钮的答案

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
  jQuery('#WMVideoxx').on('click','a',function(e) {
    e.preventDefault();
    MyFunction(jQuery(this).attr('id'));
  }); 
});
function MyFunction(anchorId) {
  alert(anchorId);
}
var counter = 0;
function plus_one() {
  counter++;
  jQuery('#WMVideoxx').append('<a href="'+ counter +'" id="anchor'+ counter +'">'+ counter +'</a><br/>');
}
</script>
<div id="WMVideoxx" style="height:100px; width:300px;"></div>
<hr><button onclick="plus_one()" value="+1"> Add anchor

（我不确定其他答案是否理解这个问题。这个多余的"a"不能去掉。jQuery曾使用.bind（）或.live（）；今天我们使用.on（）。

其想法是：这也适用于在页面加载很久之后动态添加的锚点。

因此，侦听器将密切关注div（id="WMVideoxx"），并将侦听任何子节点上的单击；单击时，on（）将检查所有子节点
)

示例完整的html文档显示1）从.on函数中删除第二个属性（"a"），并确保在元素存在后尝试应用事件处理程序：

<!DOCTYPE html>
<html>
<head>
<script src=jquery-1.12.2.min.js></script>
<style>
#WMVideoxx { width:100px; height:100px; background:#f00; cursor:pointer;	}
</style>
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<div id=WMVideoxx></div>
</body>
</html>
<script>
$('#WMVideoxx').on('click',function(e){
                                        e.preventDefault();
                                        MyFunction(jQuery(this).attr('id'));
                                    }); 
function MyFunction(anchor)
{
alert ("Anchor was "+anchor);
}
</script>

相关文章：