簡體   English   中英

jQuery的無法將模糊事件綁定到所有 <input> 頁面中的元素

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM