Jquery 单击功能不适用于动态元素

2024-05-08

我在用$.each使用每个数组对象创建按钮。我还尝试给每个按钮一个特定的 id,这样我就可以执行单击事件以进一步编码,但现在我不知道为什么所有按钮都不起作用。我错过了一些代码吗?

var questlist = [{
  "startdate": "2015-01-08",
  "questitem": [

    {
      "questid": "1",
      "gifttype": "stars",
      "quantity": 10,
      "questname": "One",
      "queststatus": "done"
    }, {
      "questid": "2",
      "gifttype": "stars",
      "quantity": 50,
      "questname": "Two",
      "queststatus": "ready"
    }, {
      "questid": "3",
      "gifttype": "stars",
      "quantity": 100,
      "questname": "Three",
      "queststatus": "complete"
    }, {
      "questid": "4",
      "gifttype": "stars",
      "quantity": 120,
      "questname": "Four",
      "queststatus": "done"
    }, {
      "questid": "5",
      "gifttype": "stars",
      "quantity": 220,
      "questname": "Five",
      "queststatus": "ready"
    },

  ]

}];
questitemlist(questlist);

function questitemlist() {
  var callquest = "<div class='questlist_container'>" +
    "<div id='call_questitem'></div>" +

    "</div>";

  $("#call_quest").append(callquest);
  var questlistobj = questlist[0].questitem;
  $.each(questlistobj, function(i, obj) {
    if (obj.queststatus == "ready") {
      var questlist_item_button = "<input type='button' id='questlist_item_button_go" + obj.questid + "' class='questlist_item_button' id='questlist_item_button' value='GO !'/>";
      $("#questlist_item_button_go" + obj.questid).click(function() {
        alert("go");

      });
      console.log("#questlist_item_button_go" + obj.questid);
    } else if (obj.queststatus == "done") {
      var questlist_item_button = "<input type='button' id='questlist_item_button_reward" + obj.questid + "' class='questlist_item_button' id='questlist_item_button' value='REWARD !'/>";
      $("#questlist_item_button_reward" + obj.questid).click(function() {
        alert("reward");

      });
    } else if (obj.queststatus == "complete") {
      var questlist_item_button = "<label class='questlist_item_complete'><img class='questlist_item_img' src='img/check.png'/></label>";

    }

    var questlist_item = "<div class='questlist_item'>" +
      questlist_item_button +
      "<label class='questlist_item_questname'>" + obj.questname + "</label>" +
      "<label class='questlist_item_gifttype'>" + obj.gifttype + " " + obj.quantity + " " + "</label>" +
      "</div>";

    $("#call_questitem").append(questlist_item);

  });

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

The click()您可以调用具有以下功能的元素的函数直接绑定。直接绑定只会附加 DOM 加载时出现的事件处理程序,即静态元素。

如果加载 DOM 后创建了元素,那么如果您没有正确附加事件处理程序,则并非所有与它们关联的事件都会被触发。

当您创建动态元素时,这意味着它们是在 DOM 加载后创建的,并且在加载时它们不存在直接绑定,所以不能直接调用click()关于这一点。

如果你想得到click动态创建的元素上的功能,您将创建一个委托绑定通过使用on http://api.jquery.com/on/。您可以通过添加一个来实现这一点.on静态父元素的处理程序。

Delegated events have the advantage that they can process events from descendant elements that          
are added to the document at a later time.

改变这一行

$("#questlist_item_button_reward" + obj.questid).click(function() {
    alert("reward");
});

to

$("#call_questitem").on("click", "#questlist_item_button_reward" + obj.questid, function() {
    alert("reward");
});

并为go按钮也是如此。

DEMO http://jsfiddle.net/fvr5njyy/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery 单击功能不适用于动态元素 的相关文章

  • 实现悬停信息框

    我有一个日历 当用户将鼠标悬停在单元格上时 会出现一个很大的信息框 其中包含该日期的详细信息 虽然当用户离开时使信息框消失 但我遇到了一些麻烦 我基本上想要它 这样当鼠标光标移出信息框隐藏的日历单元格时 它就会消失 但我遇到了麻烦 因为mo
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • Sequelize - 使用 es6 和模块运行迁移

    我不确定我是否做错了什么或者什么 我觉得我正在运行一个现代的 相当常见的堆栈 但我无法让新的 Sequelize v6 与我的设置完美配合 我在 Node v14 17 Sequelize v6 6 2 上 在我的 package json
  • 使用命名的成功/错误回调在 AngularJS 中声明一个 Promise

    我正在尝试做一些与 http 服务非常相似的事情 根据我的理解 http 返回一个 Promise 对象 使用它时 语法是 http success function data success callback error function
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并
  • 递归修剪对象中所有元素的更好方法?

    如果我有一个像这样的物体 const obj field subfield innerObj a asdasd asdas innerArr s ssad innerArrObj b adsad 我想出了这样的东西 const trimFi
  • 如何在php中使用一张图像绘制形状

    我需要使用图像的一部分来创建帧图像 例如 用户将从后端上传图像片段 现在我需要根据前端用户的要求在前端创建一个框架 用户将选择框架的高度和宽度 然后他将选择该图像片段 如下所示 我没有办法做到这一点 我尝试通过 css 和 html can
  • 游戏手柄 JavaScript 未能按预期更新

    我正在尝试让浏览器报告我的 XBOX 控制器的状态 然而 在第一次按下按钮后 它似乎变得 卡住 我究竟做错了什么
  • 窗口大小调整触发的 DOM 事件

    我有一个布局相当复杂的页面 最初打开页面时 某些元素的对齐存在问题 但是 可以通过更改浏览器窗口的大小来 永久 解决此问题 显然 我不希望用户必须调整浏览器窗口的大小才能使页面正确显示 所以我想知道是否有一种方法可以在页面首次加载时以编程方
  • 如何在 javascript 中基于类型字符串创建新对象?

    如何基于变量类型字符串 包含对象名称 在 javascript 中创建新对象 现在我有 随着更多工具的出现 列表会变得更长 function getTool name switch name case SelectTool return n
  • 发送 POST 请求时 JSON 原语无效

    我有以下 ajax 请求 其中我尝试将 JSON 对象发送到服务器 function sendData subscriptionJson ajax type POST url Url Action SubscribeSecurities S
  • 将 onclick 事件应用于页面加载时不存在的元素

    我将列表样式设置为看起来像选择框 并且当用户单击列表中的元素时我想触发一个函数 但是该元素是通过加载的AJAX因此 当页面加载并且我无法绑定时不存在onclick事件到它onDomReady 如果我把它作为一个普通的选择列表 我可以只标记一
  • jQuery 悬停时滚动到 div 并返回到第一个元素

    我基本上有一个具有设定尺寸的 div 和overflow hidden 该 div 包含 7 个子 div 但一次只显示一个 我希望当它们各自的链接悬停时能够平滑地垂直滚动 但是 第一部分 div 没有链接 并且是没有悬停链接时的默认部分
  • JavaScript Promise 不执行 .then()

    我在 JavaScript 中的 Promise 方面遇到了一些问题 我想做的是获得一个地址列表 然后对于每个地址 我需要调用地理编码 API 来获取 lat lng 然后我将继续将标记与热图一起绘制 这是我的代码 let promiseK
  • Outlook 加载项,无法读取未定义的属性“BeginRequestEventArgs”

    我使用 Visual Studio 开发了 Outlook 插件 我的插件有一个按钮 用于填充会议邀请正文中的详细信息并添加所需的与会者 这在 99 的情况下都有效 但是 时不时地它会给我下面的 JavaScript 错误 Uncaught
  • Django 将 JSON 数据传递给静态 getJSON/Javascript

    我正在尝试从 models py 中获取数据并将其序列化为views py 中的 JSON 对象 模型 py class Platform models Model platformtype models CharField max len
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是
  • D3 将现有 SVG 字符串(或元素)追加(插入)到 DIV

    我到处寻找这个问题的答案 并找到了一些我认为可能有用的资源 但最终没有让我找到答案 这里有一些 外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu
  • DOM 解析器 Chrome 扩展内存泄漏

    问题 我开发了一个扩展程序 可以拦截 Web 请求 获取 Web 请求来源的 HTML 并对其进行处理 我使用 DOMParser 来解析 HTML 并且意识到 DOMParser 正在导致大量内存泄漏问题 最终导致 chrome 扩展崩溃

随机推荐

  • 将选择菜单连接到单个表单输入中

    我有一个文本输入如下
  • FF / Chrome 支持的 XMLHttpRequest.DONE 值存在问题

    我有一段 Javascript 需要调试 var httpRequest new XMLHttpRequest httpRequest onreadystatechange function if this readyState XMLHt
  • 没有列名列表的tsql标识插入

    我要将一些数据从一个数据库转储到另一个数据库 我在用 set identity insert MyTable on GO INSERT INTO MyTable SELECT FROM sourceDB dbo MyTable GO set
  • 用整数矩阵对 data.frame 进行子集化

    我一直遇到这个问题 想知道是否有一个简单的解决方法 对于某些情况 我发现考虑将矩阵子集化更合乎逻辑 N lt 12 N NA lt 6 dat lt data frame V1 runif N V2 runif N sel mat lt m
  • C# Random 类的问题

    我有一个代表一枚硬币的类 可以使用 Coin Flip 方法翻转它 Flip 使用 random Next 2 得到代表正面或反面的 0 或 1 这很好用 有点 对于该程序 我需要有 2 个我制作的硬币 比如说 coin1 和 coin2
  • 在 Docker 中运行 Keycloak 时出错

    我试图在 Docker 中运行 Keycloak 但它抛出一个错误 这是泊坞窗文件 FROM jboss keycloak 4 1 0 Final WORKDIR opt jboss keycloak COPY realm export j
  • sklearn pipeline + keras顺序模型-如何获取历史记录?

    Keras https keras io模型 当 fit被调用时 返回一个历史对象 如果我将此模型用作 sklearn 管道的一步 是否可以检索它 顺便说一句 我正在使用 python 3 6 提前致谢 History 回调记录每个时期的训
  • OSX 上的 XAMPP 默认文件夹

    入门手册说我可以将文件放入 Applications XAMPP htdocs 文件夹和 Sites 文件夹中 但是当我将文件放入 Sites 文件夹中时 它会出现以下错误 Server error The server encounter
  • WPF 自定义控件不可见

    当我在 WPF 中创建自定义控件并将其添加到窗口时 我在对话框中看不到任何放置它的内容 这就是我正在做的 创建一个新的 WPF 应用程序 添加 gt 新项目 gt 自定义控件 WPF CustomButton cs 我将 CustomBut
  • 超出 CreateConstantBufferView 处虚拟地址的末尾

    我正在遵循 使用 DirectX12 进行游戏编程 ch 6 代码 但在 ID3DDevice CreateConstantBufferView 中 我发现 D3D12 错误 D3D12 错误 ID3D12Device CreateCons
  • 如何在 TextField (SwiftUI) 上添加底线

    I use Rectangle 在 TextField SwiftUI 上添加底部边框 但我想用protocol TextFieldStyle对于 TextField 样式的底线 如 RoundedBorderTextFieldStyle
  • 如何让枚举存储每个条目的额外信息

    我有一组包含相关信息的项目 这些项目是由我 程序员 定义的 用户不需要更改它们 它们永远不需要根据配置进行更改 并且它们唯一可能更改的时间是在我的应用程序的未来版本中 我事先知道这些项目应该有多少 以及它们的确切数据是什么 枚举是一种很棒的
  • Elasticsearch 单个字段的多个分析器

    我使用严格的预定义映射将不同类型的文档存储在单个索引中 它们都有一些字段 例如 body 但我希望在索引时对它们进行稍微不同的分析 例如 对特定文档使用不同的标记过滤器 并在搜索时以相同的方式处理 据我所知 分析器不能按文档指定 我还考虑使
  • UIScrollView 滚动时捕捉到位置

    我正在尝试实现一个捕捉到点的滚动视图滚动时 我在这里看到的所有帖子都是关于在用户结束拖动滚动条 之后 捕捉到某个点的 我想让它在拖动过程中折断 到目前为止 我已经用它来停止拖动后的惯性 并且效果很好 func scrollViewWillE
  • 检查一个数字是否是回文数

    我尝试使用以下代码检查一个数字是否是回文 unsigned short digitsof unsigned int x unsigned short n 0 while x x 10 n return n bool ispalindrome
  • 什么是 __ext_vector_type__ 和 simd?

    我正在使用 Apple Metal API 以及所谓的simd图书馆 标题中有这样的代码 typedef attribute ext vector type 3 float vector float3 我很好奇它实际上做了什么以及为什么编译
  • 正则表达式查找 Java 字符串中前 8 位数字的第一次出现

    这是我的字符串20161011 我想得到第一个字符串20161011 我正在使用 s 0 9 s 但是它不起作用 有人可以建议正确的用法吗 顺便说一句 我想检索的第一个字符串是格式的日期yyyymmdd 我不需要验证日期格式 因为它已经过预
  • 绕过外键约束强制删除mysql

    我试图从数据库中删除除一个表之外的所有表 最终出现以下错误 无法删除或更新父行 外键约束失败 当然 我可以反复试验来看看这些关键约束是什么 并最终删除所有表 但我想知道是否有一种快速方法来强制删除所有表 因为我将能够重新插入那些我想要的表
  • 使用 PushStreamContent 从 HTTPClient 上传

    我想将大量数据上传到网络服务器from客户端机器 我直接跳到 PushStreamContent 这样我就可以直接写入流 因为结果的大小各不相同 并且可能相当大 流程如下 User runs query gt Reader Ready Ev
  • Jquery 单击功能不适用于动态元素

    我在用 each使用每个数组对象创建按钮 我还尝试给每个按钮一个特定的 id 这样我就可以执行单击事件以进一步编码 但现在我不知道为什么所有按钮都不起作用 我错过了一些代码吗 var questlist startdate 2015 01