CODEWITHSUNDEEP
jquery
kiranking
kiranking

Reputation: 326

jquery hover() is not triggered when hovered first time

Menu is loaded through ajax and hover function is associated to each li using live(). But still it is not triggering for first time. From second time onwards it is triggering properly

Main file

<html>
     <head>
        <title>
            test
        </title>
        <script type='text/javascript' src='js/jquery-1.4.2.js'>
        </script>
        <script>
            $(window).load(function() {
                jQuery(document).ready(function() {
                    jQuery('.loadm').live('click', function(event) {
                        $.ajax({
                            type: "POST",
                            url: "loadmenu.php",
                            success: function(data) {
                                $('#menu').html(data);
                            },
                            error: function() {

                            }
                        });
                    });
                    jQuery('.addchar').live('hover', function(event) {
                        $('.addchar:visible').each(function(index) {
                            $(this).hover(function() {
                                $("#result").html("Index is: " + index);
                            });
                        });
                    });
                });
            });
        </script>
    </head>

    <body>
        <div id="content">
            <form method="post">
                <a href="#" class="loadm">Load Menu</a>
            </form>
            <div id="menu" style="width:100">
                none
            </div>
            <div id="result">
            </div>
        </div>
    </body>

</html>

Menu file

<?php
echo "<ul><li class='addchar'>one </li>
          <li class='addchar'>two </li>
          <li class='addchar' style='display:none'> three</li>
          <li class='addchar'>four </li>
          <li class='addchar' style='display:none'> five</li>
          <li class='addchar'>six </li>
          <li class='addchar' style='display:none'> seven</li>
          <li class='addchar'> eight</li>
          <li class='addchar' style='display:none'> nine</li>
                </ul>";

?>

Upvotes: 1

Views: 1119

Answers (1)

thecodeassassin
thecodeassassin

Reputation: 836

Get rid of the live and append the action on success

jQuery(document).ready(function() {
    jQuery('.loadm').live('click', function(event) {
        $.ajax({
            // remove the line below and restore your url
            data: "html=" + $('#menufromajax').html() + '&delay=1',
            type: "POST",
            url: "/echo/html/",
            success: function(data) {
                $('#menu').html(data);


                $('.addchar:visible').each(function(index) {
                    $(this).hover(function() {
                        $("#result").html("Index is: " + index);
                    });

                });


            },
            error: function() {

            }
        });
    });
});

http://jsfiddle.net/ENEBB/3/

works even with a delay.

But seriously, there is no need for both the $(window).load and jQuery(document).ready, you can just do $(function() or jQuery(document).ready if you are running in noconflict mode.

And don't use '< script >' always define the type by adding type='text/javascript'

Upvotes: 2

Related Questions