CODEWITHSUNDEEP
javascriptjqueryjquery-uiiframejquery-plugins
Kabilan S
Kabilan S

Reputation: 1094

JQuery Not able to bind blur event to all <input> elements in a page

I am trying to bind blur event to all "input" elements in the page. It has multiple input elements, there are some input elements even inside the "iframe".

I am able to bind blur events which are outside the iframe but not inside.

Here is some code I tried:

$('body iframe').contents().find('body').delegate('input','blur',function(e){
   alert('blur');
});

$('body,iframe').children().find('input').on('blur',function(e){
   alert('blur');
});

The HTML-structure

<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>

Both are not working for elements inside the iframe.

Is there a general solution to bind to all input elements inside the page in spite of iframes.

Also there are some requests that load dynamic iframe elements into the page, on and delegate functions are not binding blur events to newly added iframes.

Upvotes: 0

Views: 1785

Answers (2)

Kabilan S
Kabilan S

Reputation: 1094

I found the below code working for my dynamic iframes, but this is working only for the first level of iframe . In one of my page there is an iframe inside an iframe for those input elements it is not getting binded..

$('body iframe').load(function(){
    $("body iframe").contents().find('input').on('blur', function() {
                onblur(this); 
        });
    });

Upvotes: 0

Nikolay
Nikolay

Reputation: 1392

you need to refer to the document object inside of that iframe, you can't just search with jQuery in an iframe. for example

$("iframe").contents().find('input').on('blur', function() {
  console.log(this.name);
});

basically the problem is that window and the iframe will have separate contexts and documents, you can't simply traverse from one to another, you need pick one of them as a context first

Upvotes: 0

Related Questions