jQuery Forum

I'm trying to find the focused item within an iframe but failing!

Whenever I insert into the iframe, the item appears to be focused.  For example if I insert a table then the cursor is always in the last cell.

As a I test I am trying to change the background color of the cell to see if it is working but this always changes the iframe body not the item inserted so not picking up the focused "thing"

var d1 = $.Deferred();

            $.when(d1).then(function () {                
                var $iframe = $("#ifr").contents();
                var focused = $iframe.find(':focus');
                focused.css("background", "red");
                console.log(focused);
            })

            d1.resolve(insertTable(html));

the insertTable is just a call to a function that uses the execCommand to insert content to the iframe.

Is this at all possible to find the focused and store it in this method?

        <script>

        function tableOne() {

            $.ajax({

                url: "/cont/_ActionOne",

                type: "GET",

            })

             .done(function (partialViewResult) {

                 var degree = 90;

                 $(".type1").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {

                     $("#tableOne").html(partialViewResult);

                     var degreex = 0;

                     $(".type1").css("transform", "rotateY(" + degreex + "deg)");

                     console.log("tableOne");

                 })

             })

        }

    </script>

    

    <script>

        function tableTwo() {

            $.ajax({

                url: "/cont/_ActionTwo",

                type: "GET",

            })

             .done(function (partialViewResult) {

                 var degree = 90;

                 $(".type2").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {

                     $("#tableTwo").html(partialViewResult);

                     var degreex = 0;

                     $(".type2").css("transform", "rotateY(" + degreex + "deg)");

                     console.log("TableTwo");

                 })

             })

        }

    </script>

    

    <script>

        function tableThree() {

            $.ajax({

                url: "/cont/_ActionThree",

                type: "GET",

            })

             .done(function (partialViewResult) {

                 var degree = 90;

                 $(".type3").css("transform", "rotateY(" + degree + "deg)").delay(1250).queue(function () {

                     $("#tableThree").html(partialViewResult);

                     var degreex = 0;

                     $(".type3").css("transform", "rotateY(" + degreex + "deg)");

                     console.log("TableThree");

                 })

             })

        }

    </script>

    

    <script type="text/javascript">

        $(document).ready(function () {

            $.when(tableOne(), tableTwo(), tableThree()).then(function () {

                    console.log("PostLoad");

                    $('.CheckBox').attr('disabled', false);

            })

        });

    </script>