Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   При подгрузке методом .load не работает input type=file (https://javascript.ru/forum/misc/53785-pri-podgruzke-metodom-load-ne-rabotaet-input-type%3Dfile.html)

sameness 18.02.2015 08:35
При подгрузке методом .load не работает input type=file
 
Здравствуйте! В layout подготовил область, для подгрузки попапов, сами попапы выполнены отдельными PartialView (речь идет об ASP.NET MVC). Почему то при подгрузке содержимого с помощью JQ функции .load, <input type="file" /> не работает - не появляется диалог выбора файла, если выношу кнопку за границы попапа - в основное окно, то кнопка работает прекрасно, не в курсе в чем может быть дело?

ksa 18.02.2015 08:53
Цитата:
Сообщение от sameness
Почему то при подгрузке содержимого с помощью JQ функции .load, <input type="file" /> не работает - не появляется диалог выбора файла
Бивас, тест!

tmp.csp
<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	$('#test').load('tmp1.csp');
});
</script>
</head>
<body> 
<div id='test'></div>
</body>
</html>

tmp1.csp
<input type='file' />

Таки работает!

sameness 18.02.2015 09:06
Кнопка с которой открывается popup
<input type="button" onclick="$('.popup-container').load('@Url.Action("Index", "Popup")'); document.getElementById('popup').style.visibility = 'visible';" value="@GlobalRes.SelectFile" />


Область куда вставляется попап:
<div id="popup" style="visibility:hidden">
	<div class="popup-cell">
		<input type="file" />
		<div class="popup-container">
		</div>
	</div>
</div>


html в PartialView:
<div class="popup-root">
	<input type="file" />
</div>


не работает:(

ksa 18.02.2015 10:05
sameness, может осилишь смастерить нормальный тестовый пример? :D
Цитата:
Сообщение от sameness 
<input type="button" onclick="$('.popup-container').load('@Url.Action("Index", "Popup")'); document.getElementById('popup').style.visibility = 'visible';" value="@GlobalRes.SelectFile" />
Вот это вообще сантаксическая каша... ;)

sameness 18.02.2015 10:33
Все, спасибо! Меня осенило:) все дело в когда то добавленном коде исключающем бабблинг:
$(".popup-root").click(function (e) {
        return false;
    });

ksa 18.02.2015 10:38
Цитата:
Сообщение от sameness
Все, спасибо
Потому как у меня и это работает...

tmp.csp
<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body> 
<input 
	type="button" 
	onclick="$('.popup-container').load('tmp1.csp'); document.getElementById('popup').style.visibility = 'visible';" 
	value="Test" 
/>
<div id="popup" style="visibility:hidden">
	<div class="popup-cell">
		<input type="file" />
		<div class="popup-container">
		</div>
	</div>
</div>
</body>
</html>

tmp1.csp
<div class="popup-root">
    <input type="file" />
</div>

sameness 18.02.2015 10:47
А как тогда бабблинг исключить правильно? Только вверх, что бы вниз по модели DOM он распространялся все таки

ksa 18.02.2015 11:18
Цитата:
Сообщение от sameness
А как тогда бабблинг исключить правильно?
Ээээ, я тут погуглил...
Цитата:
Бабблинг — это наложение пузырей на фотографию, создается эффект голого человека.
Как это может повлиять на 
<input type="file" />

? :blink:

sameness 18.02.2015 11:49
Есть такое:)

http://learn.javascript.ru/bubbling-and-capturing
http://habrahabr.ru/post/126471/

laimas 18.02.2015 12:13
>А как тогда бабблинг исключить правильно? Только вверх, что бы вниз по модели DOM он распространялся

События всплывают (вверх), но чтобы они еще и тонули (вниз), это уже не иначе как эксклюзив.

ksa 18.02.2015 13:11
Цитата:
Сообщение от sameness
Есть такое
Для меня это называлось "всплытие события"... :cray:

ksa 18.02.2015 13:21
Как обрабатывать события так же есть статейка...
http://javascript.ru/tutorial/events/crossbrowser

Некий пример, где так же работает инпут...

<!DOCTYPE html>
<html ng-app>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
#test {
	padding: 50px;
	border: 1px solid;
}
</style>
<script type='text/javascript'>
$(function(){
	$('#test').click(function(event){
		event=event.target||event.srcElement;
		if (event.tagName=='DIV'){
			alert('Выполняем действия...');
		}; 
	});
});
</script>
</head>
<body> 
<div id='test'>
	<input type='file' />
</div>
</body>
</html>


Часовой пояс GMT +3, время: 14:45.