[英]Is there a way to code an event listener on a parent container to catch a focus/blur event on all its input elements?
[英]JQuery Not able to bind blur event to all <input> elements in a page
我試圖將模糊事件綁定到頁面中的所有“輸入”元素。 它具有多個輸入元素,甚至在“ iframe”內部也有一些輸入元素。
我能夠綁定在iframe之外但不在內部的模糊事件。
這是我嘗試的一些代碼:
$('body iframe').contents().find('body').delegate('input','blur',function(e){
alert('blur');
});
$('body,iframe').children().find('input').on('blur',function(e){
alert('blur');
});
HTML結構
<html>
<body>
<div id = abc> <!--start of abc div -->
<form>
<table>
<tr>
<input name="hello"/> <!-- able to bind event to this input -->
</tr>
</table>
</form>
</div> // end of abc div
<div id="pqr"> // start of pqr div
<iframe name="e1menuAppIframe"> <!-- iframe element (Does have more properties) -->
<html>
<body>
<div id="abc">
<form>
<table>
<tr>
<input name="hello"/> <!--not able to bind event to this input -->
</tr>
</table>
</form>
<!-- more forms -->
</body>
</html>
</iframe>
</div> <!-- end of pqr div -->
</body>
</html>
兩者均不適用於iframe中的元素。
盡管有iframe,是否有一般的解決方案可以綁定到頁面內的所有輸入元素。
也有一些請求將動態iframe元素加載到頁面中,on和委托函數未將模糊事件綁定到新添加的iframe。
您需要引用該iframe內的document
對象,而不僅僅是在iframe中使用jQuery搜索。 例如
$("iframe").contents().find('input').on('blur', function() {
console.log(this.name);
});
基本上,問題在於window
和iframe將具有單獨的上下文和文檔,您不能簡單地從一個遍歷到另一個,您需要首先選擇其中一個作為上下文
我發現以下代碼適用於動態iframe,但這僅適用於iframe的第一級。 在我的頁面之一中,一個iframe內有一個iframe用於那些未綁定的輸入元素。
$('body iframe').load(function(){
$("body iframe").contents().find('input').on('blur', function() {
onblur(this);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.