Question

I have a page with a list and some thumbnails inside.
The (simplified) html of each li when the page loads:

<a class="img" href="http://exemple.com">
   <img src="http://exemple.jpg" onmouseover="startFlipBook(...);" onmouseout="endFlipBook(...);">
</a>

In that page, I have an “Edit” Button. When I click on that button, I load the jquery UI sortable plugin (so the user is able to sort the list). With javascript, I remove the mouseover and the mouseout on the images. I also disable the click on all a href. I do:

$("#edit").click(function() {
    $( "img" ).removeAttr('onmouseover').removeAttr('onmouseout');
    $( "a, .wrap" ).css('cursor','move');
    $( "a").click(function(){return false;});
});

So far, it’s working like I want (not sure it’s the best way of doing it though).

Now, in edit mode, I have a “Cancel” button. Hitting that button should put back the mouseover and the mouseout on the images, and the links need to work again.

This is where my code is not woking. I do :

$("#cancel").click(function() {
    //No idea how I can get back my initial mouseover and mouseout with the correct parameter        
    $( "a, .wrap" ).css('cursor','auto');
    $( "a" ).click(function(){return true;});
});

The links stay unclickable, the cursor is wrong and I don’t know how to put back my mouseover event.

Any help please?

Answer 1

You should clear the onmouseover and onmouseout attribute from all ‘a’ HTML element.

<a class="img" href="http://example.com">
    <img src="http://example.jpg">
</a>

In the script you can use this sollution:

$(document).ready(function(){
    // Add mouseenter and mouseleave event listener 
    $("a.img")
        .mouseenter(function(){ startFlipBook(...); })
        .mouseleave(function(){ endFlipBook(...); });

    // When click on Edit button
    $("#edit").click(function(){

        // Remove the mouseenter and mouseleave event listener
        $("a.img").unbind("mouseenter").unbind("mouseleave");
        $("a, .wrap").css('cursor','move');
        $("a").click(function(){return false;});
    });

    // When click on Cancel button
    $("#cancel").click(function() {

        // Add mouseenter and mouseleave event listener
        $("a.img")
            .mouseenter(function(){ startFlipBook(...); })
            .mouseleave(function(){ endFlipBook(...); });
        $( "a, .wrap" ).css('cursor','auto');
        // Remove the click event listener
        $( "a" ).unbind("click");
    });
});

You can read more about jQuery functions, what i wrote above:

unbind : Remove an event listener
mouseenter: Add an event listener, when mouse enters into an area
mouseleave: Add an event listener, when mouse leaves an area