Question

关于事件以及DOM交互如何影响这些事件，我在理解jQuery（v1.11）方面遇到了一些困难。

设置：

我使用“letter”类创建一个内联块网格，并注意点击次数：

$('.letter).on('click',function(){ // do something })

当我点击一个时，它会扩展到其父容器的大小。

问题：

即使我删除了“letter”类，div仍然会响应click事件。理想情况下，我想扩展div以显示更多信息，然后在用户完成后将其缩小回原位。

这是我的html，小提琴在底部。

<!DOCTYPE html>
<html lang="en-US">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <style type="text/css">
        /* apply a natural box layout model to all elements */
        *, *:before, *:after {
          -moz-box-sizing: border-box; 
          -webkit-box-sizing: border-box; 
          box-sizing: border-box;
        }
        .square { 
            font-size: 20px;
            color: white;
            padding: 5px;
            display: inline-block;
            background-color: #69f;
            height: 50px;
            width: 50px;
            vertical-align: top;
        }
        .grid {
            width: 390px;
            padding: 5px;
            }
        .row { padding-top: 5px; }
        .square.empty { background-color: #87afff; }
        .square-highlight { background-color: #36f; }
    </style>
    </head>
    <body>
    <!-- begin content -->
    <div class="grid">
        <div class="rows">
            <div class="row">
                <div class="square empty"></div>
                <div class="square empty"></div>
                <div class="square empty"></div>
                <div class="square empty"></div>
                <div class="square empty"></div>
                <div class="square empty"></div>
                <div class="square letter">a</div>
            </div>
            <div class="row">
                <div class="square letter">b</div>
                <div class="square letter">c</div>
                <div class="square letter">d</div>
                <div class="square letter">e</div>
                <div class="square letter">f</div>
                <div class="square letter">g</div>
                <div class="square letter">h</div>
            </div>
            <div class="row">
                <div class="square letter">i</div>
                <div class="square letter">j</div>
                <div class="square letter">k</div>
                <div class="square letter">l</div>
                <div class="square letter">m</div>
                <div class="square letter">n</div>
                <div class="square letter">o</div>
            </div>
            <div class="row">
                <div class="square letter">p</div>
                <div class="square letter">q</div>
                <div class="square letter">r</div>
                <div class="square letter">s</div>
                <div class="square letter">t</div>
                <div class="square letter">u</div>
                <div class="square letter">v</div>
            </div>
            <div class="row">
                <div class="square letter">w</div>
                <div class="square letter">x</div>
                <div class="square letter">y</div>
                <div class="square letter">z</div>
                <div class="square empty"></div>
                <div class="square empty"></div>
                <div class="square empty"></div>
            </div>
        </div>
    </div>
</body>
  <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){

        $('.letter').hover(function(){
            $(this).addClass('square-highlight');
        },function(){
            $(this).removeClass('square-highlight');
        });

        $(".letter").not('.large').on('click',function(){
            $(this)
                .addClass('large')
                .css('position','absolute')
                .stop()
                .animate({
                    height: $('.rows').height()-5, 
                    width: $('.rows').width(),
                    top: $('.rows').position().top+5,
                    left: $('.rows').position().left
                },"fast")
                .append('<input type="button" name="Save" value="save" />');
        });
        $(".large").on('click',function(){
            alert('test');
        });
    });
  </script>
</html>

这是我的小提琴：http://jsfiddle.net/aKpLQ/

Answer 1

使用选择器和当时元素的状态，在$(document).ready期间将click事件绑定到元素。更改元素的类不会更改已绑定到它的事件。

要更改事件，您必须取消绑定click事件并将其与新事件绑定。或者，您可以使用具有条件的相同事件处理函数，该条件根据元素的当前状态而表现不同。类似的东西：

$(".letter").on('click',function(){
  if($(this).hasClass('large')){
    alert('test');
    $(this).removeClass('large');
  } else
    $(this)
      .addClass('large')
      .css('position','absolute')
      .stop()
      .animate({
        height: $('.rows').height()-5, 
        width: $('.rows').width(),
        top: $('.rows').position().top+5,
        left: $('.rows').position().left
      },"fast")
      .append('<input type="button" name="Save" value="save" />');
  });

Answer 2

事件在文档就绪时匹配一次，当它们都没有类大时，因此具有大型选择器的事件将不起作用。您可以检查元素是否具有类onClick http://jsfiddle.net/84gba/1/

    $(".letter").on('click',function(){
        if($(this).hasClass('large'))
        {
         alert("test");   
        }
        else
        {
        $(this)
            .addClass('large')
            .css('position','absolute')
            .css('z-index','100')
            .stop()
            .animate({
                height: $('.rows').height()-5, 
                width: $('.rows').width(),
                top: $('.rows').position().top+5,
                left: $('.rows').position().left
            },"fast")
            .append('<input type="button" name="Save" value="save" />');
        }
    });

Answer 3

我通常使用event delegation来表示这种东西，这是一个接近你的标记的例子：

$('.rows').on('click',function(e){

var $tar = $(e.target);
 if($tar.is('.letter')){
    if($tar.is('.large')){
        // Do Stuff
    } else {
        // Do other stuff
    }
});

如果你在列表中添加或删除'.letter'，这也很有用。这很酷。

Answer 4

我更新了您的jsfiddle http://jsfiddle.net/aKpLQ/1/以便它可以正常工作。我建议你采用每次用户点击它时创建和销毁div元素的模式。这样可以在不干扰现有行的情况下提供更大的灵活性。但无论如何这也是有效的，如果你想做更多的事情，可能会变得头疼。确保你记得event.currentTarget，当你试图弄清楚哪个元素触发了事件时它非常有用。

以下是代码部分，以防您懒得点击链接;）

$(document).ready(function(){

        $('.letter').hover(function(){
            $(this).addClass('square-highlight');
        },function(){
            $(this).removeClass('square-highlight');
        });

        $(".letter").on('click',function(e){
            if(!$(e.currentTarget).hasClass("large")){
            $(e.currentTarget)
                .addClass('large')
                .css('position','absolute')
                .css('z-index','100')
                .stop()
                .animate({
                    height: $('.rows').height()-5, 
                    width: $('.rows').width(),
                    top: $('.rows').position().top+5,
                    left: $('.rows').position().left
                },"fast")
                .append('<input type="button" name="Save" value="save" />');
            }
        });
        $(".large").on('click',function(){
            alert('test');
        });
    });

修改DOM时，jQuery onclick事件工作不正常

4 个答案: