Question

如果使用javascript创建链接，为什么链接无效？它只适用于我没有html（）输出

的链接

无效

$(".link").on('click', function(){
    alert('Hello');
});

$("#link").html('<a href="#" class="link">Link</a>');

<div id="link"></div>

工作

$(".link").on('click', function(){
    alert('Hello');
});

<a href="#" class="link">Link</a>

Answer 1

您的代码不起作用，因为当 DOM 中的元素不存在时事件被绑定

将代码包裹在ready中或将代码移至body的底部，以便在 DOM 完全解析时运行代码
使用event delegation绑定动态创建元素的事件。（这将使第一个选项位于可选之上）

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

＆＃13;

$(document).ready(function() {
  $("#link").on('click', '.link', function() {
    $("#link").append('<a href="#" class="link"> Link </a>');
  });

  $("#link").html('<a href="#" class="link">Link</a>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="link"></div>

＆＃13;

Answer 2

更改通话顺序。当您附加处理程序时，DOM中不存在类.link的元素。您必须先通过html上的div调用添加链接，然后才能使用on方法为其附加处理程序。请参阅下面的完整工作示例。

＆＃13;

$("#link").html('<a href="#" class="link">Link</a>');

$(".link").on('click', function(){
  alert('Hello');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="link"></div>

＆＃13;

从jquery创建链接

2 个答案: