Home/ Questions/Q 8036849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T02:45:20+00:00

I am adding content in the iframe dynamically and that content are binded with

  • 0

I am adding content in the iframe dynamically and that content are binded with an event using .live() function :

           <body>
            <div id="container">
               <iframe id="if" src="something"></iframe>
            </div>

            <script>
             /* binding event */
             $(document).ready(function() {
               $("p").live("mouseover", function() { /* do something */ });
             });

             /* appending content */
              $("#if").contents().find("#someid").append("<p></p>");                  
            </script>
           </body>

The p tag added successfully but the event is not executed on mouseover. Whats the problem?

Note : I can`t add the binding event script inside the iframe.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your live binding is only for the main document not for the iframe. Did you try following?

    With jQuery 1.4 and above use jQuery delegate:

    $("#if").ready(function() {
    $("#if").contents().delegate("p", "mouseover", function() {
        // do something
    });
});

    With jQuery 1.7 and above use jQuery on:

    $("#if").ready(function() {
    $("#if").contents().on("mouseover", "p", function() {
        // do something
    });
});

    Also see the example for delegate() or example for on(): after the “mouseevent loaded” alert hover the cloud image.

    P.s.: this will target all <p> within the iframe. But the iframe will only parsed if it is not a violation of the browser’s cross-site policy.

    • 0