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>

其中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 =“向下”按钮，它只能在第一次工作。

我不知道为什么会出现这种情况，如果点击该按钮，事件永远不会再次触发，我尝试在click事件功能中执行console.log（this），但是在向下按钮后它没有显示任何内容点击了......

知道会发生什么事吗？

非常感谢您提供给我的任何帮助

修改：这是demo

此致

Answer 1

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

在你的css文件中：添加

z-index: 10;

到.menu

添加

z-index: 1;

到.tab-page

css

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

1 个答案: