首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将innerHTML与FullCalendar中的dayRender配合使用时,onClick事件不起作用

可能是因为innerHTML会覆盖原有的HTML内容,导致事件绑定失效。解决这个问题的方法是使用事件委托,将事件绑定到父元素上,然后通过事件冒泡的方式触发事件。

具体的解决步骤如下:

  1. 在dayRender回调函数中,使用innerHTML将内容插入到FullCalendar的日期格子中。
  2. 给FullCalendar的父元素或者更外层的容器元素绑定一个事件,例如click事件。
  3. 在事件处理函数中,通过事件对象的target属性获取到被点击的具体元素。
  4. 判断被点击的元素是否是你插入的内容,可以通过元素的class或者其他属性进行判断。
  5. 如果是你插入的内容,则执行相应的操作。

下面是一个示例代码:

代码语言:txt
复制
// dayRender回调函数
function dayRender(date, cell) {
  // 使用innerHTML插入内容
  cell.innerHTML = '<div class="my-content">点击我</div>';
}

// 给FullCalendar的父元素绑定事件
document.getElementById('calendar-container').addEventListener('click', function(event) {
  // 获取被点击的元素
  var target = event.target;
  
  // 判断是否是你插入的内容
  if (target.classList.contains('my-content')) {
    // 执行相应的操作
    console.log('点击了插入的内容');
  }
});

在上面的示例中,我们将内容插入到FullCalendar的日期格子中,并给父元素绑定了一个click事件。当点击插入的内容时,会触发事件处理函数,并执行相应的操作。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。

  • 腾讯云云服务器(CVM):提供弹性计算能力,可根据业务需求弹性调整计算资源,支持多种操作系统和应用场景。产品介绍链接:腾讯云云服务器
  • 腾讯云云函数(SCF):无需管理服务器,按需运行代码,实现事件驱动的无服务器架构。产品介绍链接:腾讯云云函数

请注意,以上推荐的腾讯云产品仅供参考,具体选择还需根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

fullcalendar日历插件的使用并实现增删改查

点击未上过的课次进行编辑或删除: ? 以及课次的拖动,如将1月22号的“08:00-09:00 高数一班”拖动到1月29号: ?...ready中写,在页面初始化的时候就加载运行 $('#calendar').fullCalendar({ //设置头部信息,如果不想显示,可以设置header为false header: { //...[i].classCourseTime);//通过getTime方法将时间格式进行转化 var ccTime = classCourseTime.replace(/\-/g,"");//去掉时间格式中的...Id和班级Id一起作为fullcalendar中event事件的Id title: wesClassCourseList[i].classCourseTime+" "+wesClassList[i]....name,//title我显示的是每一个课次的上下课时间和班级名称 start: classCourseDate,//start表示这个event事件放在哪个日期框中 color: 'red',//

5.5K40

前端 实战项目·动态加载 JS 文件

defer 与 async 元素有两个属性 defer 与 async 分别代表两种 JS 脚本的加载执行模式。...对于 defer,可以认为是将外链的 js 放在了页面底部。js 的加载不会阻塞页面的渲染和资源的加载。defer 会按照原本的 js 的顺序执行。...如果加了 async 属性就相当于单独开了一个进程去独立加载和执行,而defer是和将 放到 底部一样的效果。...fullcalendar 都依赖 jquery,而 locale 依赖 fullcalendar,这种情况需要让 JS 文件按照一定的依赖关系按次序加载资源。...,因此仅使用 defer 来控制脚本文件的执行顺序有很大的风险,但可以通过监听 onload 事件来判断文件是否加载完成,配合 Promise 等待上一个脚本文件加载完成后再加载下一个文件,从而实现按次序加载执行脚本

5.4K40
  • FullCalendar 日历插件中文说明文档

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档...getDate method,返回当前日历中的日期 文本与时间定制 你可以根据项目需求设置日历显示的文本信息,如中文的月份等。...start 必须,事件的开始时间。 end 可选,结束时间。 url 可选,当指定后,事件被点击将打开对应url。 className 指定事件的样式。...事件源对象 事件源即日历中的数据来源,FullCalendar提供了数组、函数调用、以及JSON数据的形式,当然也可以通过Google Calendar feed获取数据接口。...日程事件拖动和缩放 拖动和缩放功能依赖于jQuery ui的draggable和resizable,所以在使用时要提前加载jQuery ui相关插件。

    32.7K90

    前端day16-JS(WebApi)学习笔记(事件补充、事件冒泡与捕获)

    (非常频繁) ondrop: 鼠标松开时,元素还在我的范围内就会触发 * 注意点:这个事件默认不会触发,需要配合ondragover使用 事件冒泡:让同名事件不要在父元素中冒泡(触发) * 说人话:点击一个元素只会触发当前元素的事件,不会触发父元素的同名事件 语法: 事件对象.stopPropagation() IE8及之前不支持...事件对象.cancelBubble = true IE8之前支持 注意:如果想要阻止事件冒泡,一定要在触发事件的函数中接收事件对象 事件冒泡:从触发事件元素,一级一级往上找父元素触发同名事件,如果有就触发 2.事件捕获:从最顶级的父元素一级一级往下找子元素触发同名事件,直到触发事件的元素为止 事件捕获与事件冒泡触发事件的顺序完全相反.../ } // } //2.使用时间冒泡:只需要给父元素添加点击事件即可 ul.onclick = function (e) { e = e |

    1.8K00

    ASP.NET MVC5+EF6+EasyUI 后台管理系统(86)-日程管理-fullcalendar插件用法

    前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和调用方式,非常易于扩展!...,其中只有title和start是必须的 但是我们可以全建来获得完整的数据支持 属性 描述 id 可选,事件唯一标识,重复的事件具有相同的id title 必须,事件在日历上显示的title allDay...start 必须,事件的开始时间。 end 可选,结束时间。 url 可选,当指定后,事件被点击将打开对应url。 className 指定事件的样式。... 添加从例子中引用的...四、来自前端的请求 请求之前我们需要了解一下这个插件的事件,方便我们调  http://www.cnblogs.com/ymnets/p/7052818.html 虽然很多种事件,但是下面总结几个常用时间即可

    2.7K100

    前端Demo|JS HTML DOM基础|适合学习JS的同学

    HTML DOM 是 HTML 的标准对象模型和编程接口 它定义了: 作为对象的 HTML 元素 所有 HTML 元素的属性 访问所有 HTML 元素的方法 所有 HTML 元素的事件 换言之: HTML...在JS中,不夸张的说,万物即对象,而每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。...通过标签名来查找元素 getElementsByClassName通过类名来查找元素 添加事件处理程序 getElementById(id).onclick = function(){code} 向...onclick 事件添加事件处理程序 以绑定点击事件为例 innerHTML这一行代码时,他并没有加载到下面的DOM结构,就会报错无法读取HTML 解决办法: 1.在原本的script标签中添加window.onload 2.把script代码放在

    1.6K20

    HTML5学习之FileReader接口 转

    用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。...FileReader接口的方法 方法名 参数 描述 readAsBinaryString file 将文件读取为二进制编码 readAsText file,[encoding] 将文件读取为文本...readAsDataURL file 将文件读取为DataURL abort (none) 终端读取操作 2、FileReader接口事件 FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态...FileReader接口的事件 事件 描述 onabort 中断 onerror 出错 onloadstart 开始 onprogress 正在读取 onload 成功读取 onloadend 读取完成..."; //使选择控件不可操作 file.setAttribute("disabled","disabled"); } function readAsDataURL

    42920

    ASP.ENT调用JS jquery

    在asp中的OnClick和在Html里的OnClick是不一样的,前者是ASP中的,所以点击触发的是服务器事件,后者是客服端事件,当然在ASP中也有客户端的,OnClientClick事件,它在编译后就是...HTML里的OnClicK事件。...,使这个或某个控件的onClientClick事件绑定到其他方法上,我这里是更变了本身这个控件,传入了this ?...以我的例子来说就是:点击服务器控件(编辑),触发onclick事件,更改表格结构填充数据,再改变这个控件的value为“保存”(asp的button编译后是html里的input),然后更改这个控件onclick...事件的方法为save,然后return false 使之不提交,save方法里做要修改值得验证,而这个控件从一开始绑定的服务器方法就是存储数据的。

    2.7K10

    JavaScript实现简单的双向数据绑定

    任何时候如果 JavaScript 对象或者一个 HTML 输入字段被侦测到发生了变化,我们将代理事件到发布者-订阅者模式,这会反过来将变化广播并传播到所有绑定的对象和元素。...原理就是:Angularjs内部会维护一个序列,将所有需要监控的属性放在这个序列中,当发生某些特定事件时(并不是定时的而是由某些特殊事件触发的,比如:DOM事件、XHR事件等等),Angularjs会调用...如 e-click 就解析为将对应 node 绑定 onclick 事件,e-model 必须绑定在 INPUT 和 TEXTAREA 上,然后监听 input 事件,更改 model 的值,e-bind...就直接将绑定的变量值输出到DOM元素中。...= node.getAttribute('e-click'); // bind 是使 data 的作用域与 method 函数的作用域保持一致

    1.9K30

    3-DOM

    DOM(Document Object Model) 文档对象模型 ---- 概念 将标记语言文档(HTML,XML…)的各个部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD动态操作 W3C...del.href="#"; //定义跳转链接为#,使a标签只具备点击效果,没有跳转效果 del.setAttribute("onclick","delTr...:innerHTML 使用html元素对象的属性 控制样式 innerHTML innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。...使用innerHTML简化之前的动态表格实例 <!...)执行 事件 某些操作,如单击,双击,鼠标移动,键盘操作等 事件源 被监听的组件,如文本输入框,按钮等 监听器 一段代码 注册监听 将事件,事件源和监听器绑定在一起 常见事件 点击事件 onclick

    1.3K20

    回到基础:理解 JavaScript DOM

    它使 Javascript 能够访问和操作页面的元素和样式。该模型构建在基于对象的树结构中,并定义: HTML 元素作为对象 HTML 元素的属性和事件 访问HTML元素的方法 ?...这意味着如果你想访问网页上的任何对象,必须从这里开始。它还包含许多重要的属性和方法,使我们能够访问和修改自己的页面。...1document.getElementsByTagName("div").innerHTML = "Hello World!" 在这里将 h1 标记放入所有已存在的 div 中。...下面列出了一些比较重要的事件: 鼠标点击 页面加载 鼠标移动 输入字段更改 分配事件 可以用标记上的属性直接在 HTML 代码中定义事件。...以下是 onclick 事件的例子: 1onclick=”this.innerHTML = ‘Hello!’”>Click me!

    2.5K30

    WebWorker如何使用?

    Web Worker技术 Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。...; worker.onmessage()处理函数允许我们在任何时刻,一旦接收到消息就可以执行一些代码,代码中消息本身作为事件的data属性进行使用; 1.3 postMessage方法 worker.postMessage...() 用于在线程之间发送消息; 1.4 注意 在主线程中使用时,onmessage()和postMessage() 必须挂在worker对象上,而在worker中使用时不用这样做。...1.5 terminate 方法 worker.terminate() 用于终止 worker 如果你需要从主线程中立刻终止一个运行中的worker,可以调用worker的terminate() 方法;...3.引入脚本与库 Worker 线程能够访问一个全局函数importScripts()来引入脚本,该函数接受0个或者多个URI作为参数来引入资源;以下例子都是合法的: importScripts();

    3K20

    JS基础(下)

    事件DOM Event 更多事件请查询h3c htmldom参考手册 event onclick() :当点击时 onfocus() :获得焦点时 ;当点击某个区域时触发,如点击输入框 onblur...样式分离则把CSS写成内联样式或者外联样式 换个角度来看 onclick也可以看做div的一个属性,因为写在div里面 this指向调用者,如php中 有时候你仅仅开发html,CSS是被另外的人进行写的..., 所以叫"闭包" ----一句话概括-----函数的作用域取决于声明时,而不取决于调用时 JS对象的特点 在js中,有对象,没有类(但有构造函数), JS中的对象,不依赖于类而存在, 支持任意添加和删除属性...JS封装 通过闭包来完成js面向对象的私有属性与封装 ?...关于JS继承与原型链的问题 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用

    1.9K70
    领券