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

Question

I've been trying to add event listeners as a part of a plugin. The idea is really simple, the goal is to do a slider plugin that handles 2 dimensions (horizontally and vertically)

So I have something like this

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

Where tab-page divs are absolutely positioned with 100% width and height, and tab-container is relatively positioned with 100% width and height of the browser.

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

So I put

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

Somewhere in the HTML and it works fine for up, left, right... but if you click the move="down" button it works only the first time.

I don't know why is that hapening, the event never fires again if you click that button, I tried doing console.log(this) inside the click event function, but it doesn't show anything after the down button is clicked...

Any idea of what can be happening?

Thank you very much for any help you can give me

Edit : Here is a demo

Regards

Answer 1

In you jsfiddle the down button seems to stay behind the tab-page s. Giving z-index to menu and tab-page elements solves the problem.

In your css file: Add

z-index: 10;

to .menu

Add

z-index: 1;

to .tab-page

css