首页 新闻 搜索 专区 学院

append的页面上文件上传功能不响应

0
[已解决问题] 解决于 2017-12-10 23:49

开发环境是asp.net mvc5

1、在页面上创建一个DIV

<div id="load-dynamic-page" class="dsparea"></div>

2、创建一个分部页:AddPage

<form enctype="multipart/form-data"
      method="post"
      action='@Url.Action("add", "order")'
      onclick="return false">
     <input type="file" name="file" />
     <button type="submit" data-form="submit"  value="save">保存</button>
</form>

3、在#load-dynamic-page中动态加载分部页面:AddPage

$('#load-dynamic-page').empty();
$.post(url, para)
        .done(function (data, status, jqxhr) {
            $('#load-dynamic-page').append(data)
            return false;
 })

问题,页面是可以正常加载的,但是那个fileinput的标签无法使用,点击按钮一点儿反应都没有。

如果我在#load-dynamic-page的后面再创建一个DIV,直接写入<input type="file" name="file" />是可以点击选择选择文件按钮同时可以浏览文件的

 

请问我是哪儿加载错了吗?为什么ajax动态加载的页面就是不能点击呢,动态加载出来的页面上的保存按钮是可以正常使用的。

denli的主页 denli | 初学一级 | 园豆:16
提问于:2017-11-20 10:53
< >
分享
最佳答案
0

浏览器控制台有报错信息吗?

奖励园豆:5
dudu | 高人七级 |园豆:36360 | 2017-11-20 11:25

没有报出有任何的丁点儿错误,直接点击不响应。

加载完毕以后,页面显示正常,所有的标签都能正常显示

就是在点击【选择文件】时,按钮是已经按下去了,就是不弹出文件选择框。

控制台也没有任何提示信息

denli | 园豆:16 (初学一级) | 2017-11-20 11:28

@denli: 是form中的onclick="return false"引起的,建议用onsubmit="return false"

dudu | 园豆:36360 (高人七级) | 2017-11-20 12:17
其他回答(1)
0

楼上正解,就是由于 onclick="return false" 引起的。

这个主要是JS的事件冒泡机制

当你点击input file的时候,先执行input的默认事件,然后执行外层元素的onclick事件,直到body为止。但是你input外面的form上有一个return false,终止了click响应事件,自然也就没反应了。

解决方法推荐楼上说的那种将form上的onclick改成onsubmit。

或者给input file加上一个onclick事件

window.event? window.event.cancelBubble = true : e.stopPropagation();

以此来阻止js冒泡事件。

 

给你个例子

1 <html>
2     <body onclick="alert('body')">
3         <div style="width:350px;height:50px;background:#0f0" onclick="alert('1');">
4         <div style="width:300px;height:30px;background:#aaa" onclick="alert('2');">
5             <input type="file" name="file" onclick="window.event? window.event.cancelBubble = true : e.stopPropagation();" />
6         </div>
7         </div>
8     </body>
9 </html>
写代码的相声演员 | 园豆:517 (小虾三级) | 2017-11-20 12:53
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册