javascript - jQuery 点击事件在插件中停止工作

Question

我一直在尝试添加事件监听器作为插件的一部分。这个想法非常简单，目标是做一个处理 2 维(水平和垂直)的 slider 插件

所以我有这样的东西

<div class="tab-container bg-dark-blue" start-tab="Home">

    <div class="tab-page" x-index="1" y-index="1" id="Home">
        <h1>x=1, y=1</h1>
    </div>

    <div class="tab-page" x-index="1" y-index="2">
        <h1>x=1, y=2</h1>
    </div>

    <div class="tab-page" x-index="2" y-index="1">
        <h1>x=2, y=1</h1>
    </div>

    <div class="tab-page" x-index="2" y-index="2">
        <h1>x=2, y=2</h1>
    </div>

</div>

其中 tab-page div 以 100% 宽度和高度绝对定位，而 tab-container 以浏览器的 100% 宽度和高度相对定位。

var __MyMethods = {
width : 0
height : 0,
container : null,
// other stuff
setup : function(tab_container) {
// setup __MyPlugin.container = tab_container
// setup width, height of the container
},
            /*
         * Movement functions
         *
         */
        move : function(direction)
        {

            if( direction == 'left' )
            {
                __MyMethods.x--;
                __MyMethods.translate( 'left', __MyMethods.width );
                //
            }

            if( direction == 'right' )
            {
                __MyMethods.x++;
                __MyMethods.translate( 'left', (-1)*__MyMethods.width );

                //
            }

            if( direction == 'up' )
            {
                __MyMethods.y--;
                __MyMethods.translate( 'top', __MyMethods.height );
            }

            if( direction == 'down' )
            {
                //
                __MyMethods.y++;
                __MyMethods.translate( 'top', (-1)*__MyMethods.height );
                //
            }


        },


        translate : function(property, offset)
        {


            // For each .tab-page in we animate the CSS property
            $(__MyMethods.container).children(".tab-page").each( function() {
                var animation = {};

                var x = parseInt( $(this).css(property).replace('px','') ) + offset;


                animation[property] = x.toString() + 'px';

                $(this).animate(
                    animation,
                    {
                        'duration' : 0,
                        'queue' : false,
                    }
                );

            });


        },


    };
$.fn.MyPlugin = function()
{
    __MyMethods.setup(this);


    $(".btn").click( function(event)
    {
        __MyMethods.move( $(this).attr("move") );
        console.log(this);
    });


    return this;
};

所以我把

<button class="btn" move="up"></button>
<button class="btn" move="down"></button> 
<button class="btn" move="left"></button>
<button class="btn" move="right"></button> 

在 HTML 中的某个位置，它可以很好地用于向上、向左、向右...但是如果您单击 move="down"按钮，它仅在第一次时有效。

我不知道为什么会发生这种情况，如果您单击该按钮，该事件永远不会再次触发，我尝试在单击事件函数内执行 console.log(this) ，但在向下按钮之后它不显示任何内容被点击...

知道会发生什么吗？

非常感谢您给我的帮助

编辑:这是一个demo

问候

Answer 1

在你的jsfiddle中，向下按钮似乎停留在标签页后面。为菜单和选项卡页元素提供 z-index 可以解决该问题。

在你的 CSS 文件中: 添加

z-index: 10;

到.menu

添加

z-index: 1;

到.tab页

css