jQuery hoverIntent iteration problem with multiple li's

Question

hello, I'm using hoverIntent to fire onMouseOver and onMouseOut events

it works for one of my li, actually it looks like it appends itself to only one li and as I hover other list items it displays the show() and hide() functions to the last list item.

here is my code:

            <script>
                $(document).ready(function(){
                        var config = {
                            over: show, // function = onMouseOver callback (REQUIRED)    
                            timeout: 200, // number = milliseconds delay before onMouseOut    
                            out: hide // function = onMouseOut callback (REQUIRED)    
                        };
                    $("#ULid li").hoverIntent( config )
                    $('a.names').click(function() {
                        var id = this.id.replace('id', '');
                        $.get("dependencies/ajax/contacts.ajax.php",{
                            cmd    : "view",
                            id   : id,
                        }, function(data) {
                            $("#detailsPane").fadeIn(500).html(data);
                        });
                    });
                    $('a.delete').click(function() {
                        var id = this.id.replace('id', '');
                        $.get("dependencies/ajax/contacts.ajax.php",{
                            cmd    : "view",
                            id   : id,
                        }, function(data) {
                            $("#contact-" + id).slideUp("slow").html(data);
                        });
                    });
                });
                function show(){
                    var selector = $(this).find('.delete-div');
                    selector.fadeIn('slow');
                }
                function hide(){
                    var selector = $(this).find('.delete-div');
                    selector.fadeOut(500);
                }
            </script>
            <div class="toolbar">
                <a href="javascript:void(0);" onclick='$("#addC").toggle();'><p id="addC20" style="float: left"></p></a>
                <p style="float: right; position: relative; top: 0px; left: -10px;">Contact Manager</p>
            </div><!-- end toolbar -->

            <div id="contact-wrap">
                <div id="groups">
                    <div id="contact-search" class="search">
                        <input type="text" class="input" name="search" />
                        <img src="dependencies/images/header/search.png" />
                    </div><!-- end search -->

                    <h3 id="groups-heading">Groups</h3>
                    <ul class="post">
                    <? while($row = mysql_fetch_array($groups)) {
                        echo '<li><a href="#" class="groups" id="' . $row['id'] . '">' . $row['first_name'] . ', ' . $row['last_name'] . '</a></li>';
                    } ?>
                        <li>Business</li>
                        <li>Personal</li>
                        <li><a href="#">Add group</a></li>
                    </ul><!-- end post -->
                </div><!-- end names -->

                <div id="names">
                    <h3 id="names-heading">Contacts</h3>
                    <ul class="post" id="ULid">
                    <? while($row = mysql_fetch_array($contacts)) { ?>
                        <li id="contact-<?=$row['id'];?>">
                            <p class="contact-image" style="float: left;"></p>
                            <span><a href="javascript:void(0);" class="names" id="<?=$row['id'];?>"><?=$row['first_name'];?>, <?=$row['last_name'];?></a></span>
                            <div class="delete-div" style="float: right; display: none;">
                                <a href="javascript:void(0);" class="delete" id="<?=$row['id'];?>">
                                    <p class="delete-image" style="float: left;"></p>
                                </a>
                            </div>
                        </li>
                    <? } ?>
                    </ul><!-- end post -->
                </div><!-- end names -->

                <div id="detailsPane"></div>

If I move the script outside the while loop then it show the delete div to the first list item and only to that one as I hover over to other list items.

Any ideas as to why it's doing this?

Answer 1

hmmmm.... you really need some help there!

firstly, let's do this outside the loop ,

<script>
$(document).ready(function(){
    var config = {  over: show,    
    timeout: 200,    
    out: hide    
    };
    $('#ULid li').hoverIntent( config );    

    $('a.names').click(function(){
        var id = this.id.replace('id','');
        $.get("dependencies/ajax/contacts.ajax.php",{
            cmd    : "view",
            id   : id,
    }, function(data) {                                      
               $("#detailsPane").fadeIn().html(data);
        });
    });

    $('a.delete').click(function() {

       var id = this.id.replace('id', '');
       var $this = $(this);

       $.get("dependencies/ajax/contacts.ajax.php",{
          cmd    : "delete",
          id   : id,
       }, function(data) {
          $this.closest('li').slideUp("slow").html(data);
       });
    });


});

function show(){ 
    var selector = $(this).find('.delete');
    selector.fadeIn('slow');
}
function hide(){ 
    var selector = $(this).find('.delete');
    selector.fadeOut('slow');
}
</script>

then your php

<ul id="ULid">
<? while($row = mysql_fetch_array($contacts)) { ?>

    <li id="contact-<?=$row['id'];?>">
        <p class="contact-image" style="float: left;"></p>
        <span><a href="#" class="names" id="id<?=$row['id'];?>"><?=$row['first_name'];?>, <?=$row['last_name'];?></a></span>
        <div class="delete" style="float: right; display: none;">
            <a href="javascript:void(0);" class="view"onclick='
                $.get("dependencies/ajax/contacts.ajax.php",{
                    cmd: "delete",
                    id: "<?=$row['id'];?>"
                }, function(data){
                $("contact-<?=$row['id'];?>").fadeOut(2000).html(data);
                });
            '>
            <p class="delete-image" style="float: left;"></p>
            </a>
        </div>
    </li>
<? } ?>
</ul>