首页
学习
活动
专区
工具
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一起作为fullcalendarevent事件Id title: wesClassCourseList[i].classCourseTime+" "+wesClassList[i]....name,//title我显示是每一个课次上下课时间和班级名称 start: classCourseDate,//start表示这个event事件放在哪个日期框 color: 'red',//

5.4K40

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

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

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

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

    31.6K90

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

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

    1.7K00

    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 事件添加事件处理程序 以绑定点击事件为例 <meta http-equiv...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

    42420

    ASP.ENT调用JS jquery

    在aspOnClick和在Html里OnClick是不一样,前者是ASP,所以点击触发是服务器事件,后者是客服端事件,当然在ASP也有客户端,OnClientClick事件,它在编译后就是...HTML里OnClicK事件。...,使这个或某个控件onClientClick事件绑定到其他方法上,我这里是更变了本身这个控件,传入了this ?...以我例子来说就是:点击服务器控件(编辑),触发onclick事件,更改表格结构填充数据,再改变这个控件value为“保存”(aspbutton编译后是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

    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,可以调用workerterminate() 方法;...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.8K70

    【面试题】hash history 路由实现原理

    使用浏览器访问网页时,如果网页URL带有hash,页面就会定位到id(或name)hash值一样元素位置,故而又称之为锚点。...新 url 可以是当前 url 同源任意 url ,也可以是当前 url 一样地址 4. 通过 history.state ,添加任意类型数据到记录。 5....底层实现原理 React 基于history 实现BrowserRouter, 通过 onpopstate事件和自定义 onpushstate事件实现 代码: <div id="root...container.<em>innerHTML</em> = event.state.to; } // 自定义实现压栈状态<em>的</em><em>事件</em>,这个<em>事件</em>window上是没有的 function push(to) { /...(state,title,url) } // 5.<em>将</em><em>事件</em>定义在window属性上 浏览器<em>的</em>前进按钮 window.onpushstate = function(state,title,url

    1.4K10
    领券