Question

我的jQuery将 onclick 事件添加到动态锚标记中，当用户点击锚标记时，它会传递 id 已点击的锚标记。我的脚本有问题吗？

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

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

function MyFunction(anchor)
{
}

Answer 1

这个怎么样？

$('#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>

Answer 2

它很好用，就像这样

<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

（我不确定其他答案是否理解了这个问题。这个额外的，＆＃39; a＆＃39;一定不能删除。 jQuery曾经用.bind（）或.live（）做到这一点;今天我们使用.on（）。

这个想法是：这也适用于在页面加载后很长时间内动态添加的锚点。

所以听众会密切注意div（id =＆＃34; WMVideoxx＆＃34;），并且会听取任何子节点的点击;在点击的那一刻，on（）将检查所有的子节点）

Answer 3

示例完整的html doc显示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>

我的动态onclick我的锚属性没有触发

3 个答案: