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动态加载的页面就是不能点击呢，动态加载出来的页面上的保存按钮是可以正常使用的。
最佳答案
0
浏览器控制台有报错信息吗？
奖励园豆：5
没有报出有任何的丁点儿错误，直接点击不响应。
加载完毕以后，页面显示正常，所有的标签都能正常显示
就是在点击【选择文件】时，按钮是已经按下去了，就是不弹出文件选择框。
控制台也没有任何提示信息
@denli: 是form中的onclick="return false"引起的，建议用onsubmit="return false"
其他回答(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>
