是否无法通过编码为创建的元素创建函数

Is it impossible to create a function for a created element through coding?

本文关键字：创建 元素 函数 编码 是否      更新时间：2023-09-26
var div = document.createElement('div');
div.setAttribute('class', 'asd');
parent.appendChild(div);

此代码基本上创建一个div 并将其附加到父元素中。 

 $(".asd").hover(function(){
alert("hey");};

这是悬停创建的div 时的一个函数。但它不起作用。有什么解决办法吗？

你忘记了一个右括号：

$(".asd").hover(function(){
 alert("hey");
});

但实际上，如果您要动态添加元素，则应将hover事件更改为使用 mouseover 和 mouseout 的事件，并使用事件委托，以便在事件阶梯(或任何名称(向上冒泡时可以捕获事件：

$(document).on('mouseover', '.asd', function () {
  console.log('on')
}).on('mouseout', '.asd', function () {
  console.log('off')
});
如果你

打算使用jQuery，我建议你用它来进行所有的DOM操作。使用document.createElement和jQuery有点奇怪。

演示

当然，但你需要使用事件委托： 

$(document).on('mouseenter', '.asd', function() {
    // do stuff here
}).on('mouseleave', '.asd', function() {
    // undo stuff here
});

这会将事件侦听器应用于 DOM 加载上存在的某个祖先元素，并且仅当事件目标是作为第二个参数列出的元素时才运行该函数。

此方法允许您随意向页面添加元素，而无需创建新的悬停侦听器。任何具有类 asd 的元素都将附加侦听器。

如果性能是一个问题，请将 DOM 加载上可用的任何祖先元素替换为document，以减少侦听器的范围。

http://api.jquery.com/on

请将所有代码括在DOM ready中或将代码放在页面底部：

注意：对于此演示，我添加了function() {}作为hover的第二个参数，以便alert不会出现两次......我可以/应该使用focusin事件。

$(function() {
  var parent = $('.parent')[0];
  var div = document.createElement('div');
  div.setAttribute('class', 'asd');
  parent.appendChild(div);
  $(div).hover(function() {
    alert("hey");
  }, function() {});
});
.asd {
  border: 1px solid #000;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent"></div>

动态创建的div上的事件委托是错误的，并且有一个括号错误这样写

$(document).on(hover,"asd"function(){
    alert("hey");
});

另外，你可以把创建div留给jquery

parent.appendChild('<div class="asd"></div>');
相关文章：