jQuery click事件停止在插件中工作

Question

我一直在嘗試將事件偵聽器添加為插件的一部分。 這個想法非常簡單，目標是制作一個可處理2個維度（水平和垂直）的滑塊插件

所以我有這樣的事情

<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>

標簽頁div絕對以100％的寬度和高度定位，而標簽容器相對定位為以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”按鈕，則只能在第一次使用。

我不知道為什么會這樣，如果您單擊該按鈕，該事件將永遠不會再次觸發，我嘗試在click事件函數中執行console.log（this），但是在單擊向下按鈕后它什么也沒有顯示。 ..

有什么可能發生的想法嗎？

非常感謝您能給我的任何幫助

編輯 ：這是一個演示

問候

Answer 1

在您jsfiddle中，向下按鈕似乎停留在tab-page的后面。 將z-index賦予菜單和選項卡頁面元素可以解決此問題。

在您的CSS文件中：添加

z-index: 10;

到.menu

加

z-index: 1;

到.tab-page

的CSS