javascript - 单击功能在动态创建的元素 Jquery 上无法按预期工作

标签 javascript jquery ajax

我有动态创建的元素列表,单击这些元素会触发 ajax 请求并显示结果。问题是它只有在单击两次时才起作用。第一次点击元素不起作用。而第二次点击效果完美。我不明白这背后的原因。我确实尝试过unbind()但这没有帮助

$("#profiles_name ul a").on('click',function(event){
        $.ajax({ 
  }
  });
  });.

我确实尝试过$("#profiles_name ul a").unbind().on('click',function(event)..它仍然不起作用。

这是我动态创建的标签

<ul>
  <a href="javascript:myfunction(this)" data-value="20/20"><li>Frontend Dev</li></a>
  <li class="divider"></li>
</ul>

还要注意的是,例如,如果我有两个动态创建的列表,当我单击列表 1(第一次)时,它不起作用,列表 1(第二次)起作用。页面刷新后, 单击列表 1(第一次)不起作用,单击列表 2(第一次)起作用。即,无论动态创建的元素如何,第一次单击都不起作用。

最佳答案

更喜欢使用event delegation :

$("#profiles_name").on('click', 'ul a', function() {
    $.ajax({
        // Your code here
    });
});

Event delegation:

Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.

关于javascript - 单击功能在动态创建的元素 Jquery 上无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41696650/

相关文章:

javascript - 为 Web 应用程序使用后退和前进浏览器按钮

javascript - 单击按钮时使用 css 动画创建径向进度条

JavaScript 文件在 IIS 上返回 404 Not Found

javascript - 如何使用 php 有效地将巨大的 javascript 字符串存储到文件中?

javascript - jquery 表单验证在 ajax 提交期间不起作用

php - Javascript、AJAX 和 JSON 问题

javascript - 如何使用 PHP 添加图像以选择 HTML 中的选项?

javascript - 调整大小功能加载页面

javascript - 动力学;使用按钮使多个对象出现和消失

javascript - 如果第二个子元素为空,jQuery 删除页面上的多个类