今天在工作中碰到一个页面调用模态框之后，页面原来的JS失效的问题，由于前台经验较少，折腾了一天。。。

问题描述是这样，在页面，有两个下拉列表框A和B，做了下拉列表框联动，有一个button按钮会调用模态框，刚进入页面联动是好用的，所以联动的JS 代码没问题，点击模态框之后，JS失效。

上图是下拉列表框联动的JS

经过不懈的调试(其实就是各种瞎试)以及询问老大哥(这个才是解决之道)，终于发现了问题所在：

　　页面刚加载进来的时候联动JS好用，是因为直接加载了JS，调用模态框之后，在success回调函数中没有进行联动JS的调用，导致调用模态框之后联动失效

解决方法是，将联动的JS写在一个方法change中，加载页面时的function中写一个调用change()，调用模态框之后success回调函数中也调用change()

感觉很不错，对于我这个菜鸟，还是很有收获的

刚开始写，希望能帮助到需要的人，欢迎各位指教~

MVC中调用模态框之后导致JS失效的更多相关文章

  1. bootstrap中的模态框（modal，弹出层）

    默认的modal示例: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset= ...

  2. Bootstrap学习5--bootstrap中的模态框（modal，弹出层）

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...

  3. 轻量级Modal模态框插件cta.js

    今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <se ...

  4. iframe中使用模态框提交表单后,iframe加载父页面的解决方法

    在iframe中使用模态框提交表单后,会出现iframe加载整个父页面的问题,如下图: 解决方法: 在form表单中添加target属性 _parent 这个属性会使目标文档载入父窗口或者包含来超链接 ...

  5. Jquery方法load之后导致js失效解决方法

    Jquery方法load之后导致js失效解决方法 >>>>>>>>>>>>>>>>>>> ...

  6. 整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好

    效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...

  7. Angular2+之模态框-使用ngx-bootstrap包中的模态框组件实现

    模态框是项目中经常会用到的一个公共功能,通常会被用左提示框或者扩展选项框. 下面,我用一个小例子来简单展示实现模态框功能的过程: 1.为项目加包: ng add ngx-bootstrap 2.在xx ...

  8. JS 在open打开的子窗口页面中调用父窗口页面的JS方法

    需求的情景如下: 1:做新增或修改等操作的时候打开一个新的浏览器窗口(使用window.open(参数等)方法) 2:在新增或修改等的页面上有返回按钮.重置按钮.保存按钮,对于返回就直接关闭此窗口(使 ...

  9. iframe中的模态框遮罩父窗口原理

    关键点: css的position定位为fixed或absolute css的z-index, 最顶层的值最大如遮罩层为0那么弹出框最好是大于等于1的整数,总之记住弹出层要比遮罩的z-index值大就 ...

随机推荐

  1. 福利来了，现“免费”赠送Spring微服务实战书籍

    本书适合拥有构建分布式应用程序的经验.拥有Spring的知识背景以及对学习构建基于微服务的应用程序感兴趣的Java开发人员阅读. 本书籍赠送活动详情,请识别上图二维码☝☝☝☝☝ 书籍推荐 本书教读者如 ...

  2. 使用layer的弹窗时，出现layer引入成功，触发成功，控制台无报错，但是页面无变化或者仅出现遮罩层的问题的解决思路

    ------------------------------------------20180410补充------------------------------------------------ ...

  3. python turtle库的几个小demo

    一.先上图 一个同切圆和五角星 上代码 import turtle #同切圆 turtle.pensize(2) turtle.circle(10) turtle.circle(40) turtle. ...

  4. Python爬虫入门之Urllib库的基本使用

    那么接下来,小伙伴们就一起和我真正迈向我们的爬虫之路吧. 1.分分钟扒一个网页下来 怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的画面,但是其实是由浏览器解 ...

  5. failed call to cuInit: CUDA_ERROR_NO_DEVICE: no CUDA-capable device is detected 排坑指南

    训练maskrcnn时,出现了 failed call to cuInit: CUDA_ERROR_NO_DEVICE: no CUDA-capable device is detected 一开始以 ...

  6. Nginx配置文档

    转https://www.cnblogs.com/hunttown/p/5759959.html

  7. HDFS（一） 高级特性

    三个高级特性——快照.配额.回收站 一.快照(snapshot):是一种备份,默认关闭 1.应用场景: 防止用户错误操作 备份 试验/测试 灾难恢复 2.命令: 管理命令: -allowsnapsho ...

  8. 20145338 《网络对抗》逆向及Bof基础实验

    逆向及Bof基础实验 实践目标 ·本次实践的对象是一个名为pwn1的linux可执行文件. ·该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. ·该程序同时包含 ...

  9. lsof 命令用法详解

    lsof 命令用法详解 作用 用于查看你进程开打的文件,打开文件的进程,进程打开的端口(TCP.UDP).找回/恢复删除的文件.是十分方便的系统监视工具,因为lsof命令需要访问核心内存和各种文件,所 ...

  10. jenkins+svn完整打包并上传到linux服务器上

    因为公司用的是svn版本管理工具并且部署在了windows服务器上,所以测试环使用jenkins需要部署两套环境, 一套是在本地windows服务器,jenkins从svn下载代码完成打包并上传到li ...