У меня есть код во фрагменте iframe (загруженный ajax), но только $(".teacherBtn") работает и правильно связывает обработчик событий. Но эти селекторы в функции обратного вызова не будут работать. Только второй console.dir($(this)) имеет правильный вывод. Я загрузил jquery lib как обычную страницу.
Похоже, что функция $ находит expression в дереве документов родительского окна. Но я проверил это в простом файле, и он показывает, что при загрузке библиотеки jq в документ iframe's функция будет работать в дереве документов дочернего окна. Я думаю, что должно быть что-то не так в области видимости или элементе окна, но я не знаю, как это решить.
Мне также интересно, каковы различия между повторным импортом jq lib и использованием $ = parent.$. Я думал, что $ это просто функция, но оказывается, что при импорте библиотеки $("exp") найдет элемент в iframe, а $ = parent.$ будет в тегах родительского окна.
<script type="text/javascript">
$(function(){
$(".teacherBtn").bind('click',function(){
console.dir($("#questRange"));
console.dir($(this));
console.dir($(".teacherBtn"));
});
});
</script>
Все эти .teacherBtn #questRange находятся во iframe фрагменте. Вот HTML-документ, и он находится во фрагменте iframe. Я использую плагин JQ, который помогает всплывающее окно, которое содержится в разделе iframe. Я действительно не хочу использовать iframe.
<!doctype html>
<html>
<head>
<style type="text/css">
//some details
</style>
<script type="text/javascript" src="./js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(function(){
$(".teacherBtn").bind('click',function(){
console.dir($("#questRange")); //it works when change the id to that occured in parent window (out of iframe).
console.dir($(this));
console.dir($(".teacherBtn"));
});
});
</script>
</head>
<body>
<div id="teacherCtrl">
<form name="questOpt" id="questOpt" action="questCtrl.php" method='post'>
<div id="questRange" class='optSection'>
//some details
</div>
<div id="questCtrl" class='optSection'>
//some details
</div>
<div id='questType' class='optSection'>
//some details
</div>
<input type="button" value="show" id="showPaper" name="showPaper" class="teacherBtn"/>
<input type="button" value="download" id="downDoc" name="downDoc" class="teacherBtn" />
<input type="button" value="submit" id="olTestOpt" name="olTestOpt" class="teacherBtn"/>
</form>
</div>
</body>
</html>
И этот код будет загружен во фрагмент <iframe width="100%" scrolling="auto" frameborder="0" src="test/teacher.php" name="1991_content" id="1991_content" style="height: 495px;"></iframe>. iframe создается плагином jq.