0

我有一个页面，里面有一个列表和一些缩略图。页面加载时每个li的（简化）html ：

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

在那个页面中，我有一个“编辑”按钮。当我单击该按钮时，我加载了 jquery UI 可排序插件（因此用户能够对列表进行排序）。使用 javascript，我删除了图像上的mouseover和mouseout。我还禁用了对所有a href的点击。我愿意：

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

到目前为止，它就像我想要的那样工作（虽然不确定这是最好的方法）。

现在，在编辑模式下，我有一个“取消”按钮。点击该按钮应该将鼠标悬停和鼠标悬停放回图像上，并且链接需要再次工作。

这是我的代码无法正常工作的地方。我愿意 ：

$("#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;});
});

链接保持不可点击，光标错误，我不知道如何放回我的鼠标悬停事件。

请问有什么帮助吗？

4

2 回答 2

1

在您的“取消”点击功能中......

$('a').unbind('click');

这将取消绑定返回 false 的 click 函数（禁用您的链接）。

于 2012-11-05T17:54:12.637 回答
1

您应该清除所有 'a' HTML 元素中的onmouseoverandonmouseout属性。

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

在脚本中，您可以使用此解决方案：

$(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");
    });
});

你可以阅读更多关于 jQuery 函数的信息，我在上面写的：

unbind : 移除事件监听
mouseenter : 添加事件监听, 当鼠标进入一个区域
mouseleave : 添加一个事件监听, 当鼠标离开一个区域

于 2012-11-05T18:46:18.263 回答