hover effect is missing after `replaceWith`

lzl124631x commented 9 years ago

// html

            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <meta http-equiv="X-UA-Compatible" content="IE=7" />
                <title></title>
                <link type="text/css" href="changeElement-hover.css" rel="stylesheet" />
                <script type="text/javascript" src="Scripts/jquery-1.11.1.min.js"></script>
                <script type="text/javascript" src="Scripts/selectivizr-min.js"></script>
                <script>
                    $(function () {
                        function updateText() {
                            $(this).text('newnewnewnewnewnewnewnewnewnewnew');
                        }

                        function updateBox() {
                            $(this).replaceWith($('<span class="box">newnewnewnewnewnewnewnewnewnewnew. </span>'));
                        }

                        $('.box').click(updateBox);
                    })
                </script>
            </head>
            <body>
                <span class="box">oldoldoldoldoldoldoldoldoldoldoldoldoldold. </span><span class="box">oldoldoldoldoldoldoldoldoldoldoldoldoldold. </span>
            </body>
            </html>

// css

        .box {
            cursor: pointer;
            font-style: italic;
        }

            .box:hover {
                background-color: yellow;
            }

            .box:last-child {
                color: red;
            }

The above code illustrates a bug: after new element substitutes the old one by replaceWith, the hover effect is missing.

lzl124631x commented 9 years ago

In a word, inserted elements can't have hover effect (maybe it's because it won't be added 'slvzr-hover' to it).

lzl124631x commented 9 years ago

This severely affects dynamic webpages.

keithclark / selectivizr

hover effect is missing after `replaceWith` #94