今天在工作中碰到一个页面调用模态框之后,页面原来的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. inotify事件监控工具

    inotify事件监控工具   rsync + inotify 组合的起源   inotify优缺点 优点:监控文件系统事件变化,通过同步工具实现实时数据同步 缺点:并发如果大于200个文件(10-1 ...

  2. CEPH监控软件

    概述 目前主流的Ceph开源监控软件有:Calamari.VSM.Inkscope.Ceph-Dash.Zabbix等,下面简单介绍下各个开源组件. Calamari 概述 Calamari对外提供了 ...

  3. 第三周博客之二---Oracle中的sql语句

    一.用户及权限(DBA有最高系统权限) 1.数据库的安全性:系统的安全性.数据的安全性 2.权限分类: 2.1系统权限:获得后可访问数据库 常用的有create table,create user,c ...

  4. 验证GridControl Gridview 单元格。

    一般的验证方法,使用单元格值改变事件.现在记录另一个事件实现验证. 场景:控制当某个单元格的值的长度不能超过10 直接看代码: private void gridViewFileContent_Val ...

  5. mui组件 输入表单 快捷键mf

    <form class="mui-input-group"> <div class="mui-input-row"> <label ...

  6. Docker容器的管理

    创建容器的工作原理: 当利用docker run来创建容器时,Docker在后台运行的标准操作包括:检查本地是否存在指定的镜像,不存在就从公有仓库下载,利用镜像创建并启动一个容器分配一个文件系统,并在 ...

  7. Vue源码之----为什么Vue中Array的pop,push等方法可以reactive,而Array[0]='a'这样的方法不会reactive?

    这就要从reactive开始讲起了,粗略的说,js的操作能引起页面上显示的改变,是因为该操作引起了组件的重新渲染,渲染会生成新的虚拟节点,新节点和旧节点会对比,操作浏览器的node进行改变. vue实 ...

  8. MNIST机器学习入门

    "python: 3.5" # -*- coding: utf-8 -*-"""Created on Tue Oct 16 15:29:38 2018 ...

  9. jmeter保持登录

    1.添加配置元祖---http cookie 管理器(注意上面的http cookie管理器和其他的配置是对其的) 2.这里是当你想要配置多用户并发是要配置不同的账号,配置后记得上面的第一张图的清除c ...

  10. div css 图片和文字上下居中对齐

    想要图片和文字水平居中对齐很容易,可今天做这个树的时候,遇到了要将图片上下居中.这下就不知道怎么搞. 拿手册看也看不出所以然来,不同的浏览器对DIV的支持不一个,目前最好的浏览器是Firefox. 这 ...