Question

我有以下代码，您可以在http://jsfiddle.net/XBfMV/29/

上测试它

HTML：

<div class="sam">div 1</div>
<div class="sam">div 2</div>
<div class="sam">div 3</div>
<div class="sam">div 4</div>

css：

.expanded{
    border-style:solid;
    border-width:1px;
    border-color:black;
    background-color:yellow;
    min-height:50px;
}

的javascript：

$('.sam').on('click',function(){   

    if ( $(this).hasClass('expanded') ){
        $(this).removeClass('expanded');
    } else {
        $(this).addClass('expanded');

    }

});

$(document).ready(function(){
    //Im just test to write some divs after document ready
    var output = '<div class="sam">div 5</div>';
    $(output).insertAfter('.sam:last').fadeIn('slow');
    var output = '<div class="sam">div 6</div>';
    $(output).insertAfter('.sam:last').fadeIn('slow');
});

运行后点击div1，div2，div3和div 4，它将.expanded类添加/删除到div但是当点击由java生成的div5和div6并打印到文档时它不会添加/当我点击它们时，从它们中删除它。

任何解决方案？

Answer 1

将选择器添加到on功能。

写：

$(document).on('click', '.sam', function () {
    if ($(this).hasClass('expanded')) {
        $(this).removeClass('expanded');
    } else {
        $(this).addClass('expanded');
    }
});

Updated fiddle here.

Refer syntax.

Answer 2

使用

$(document).on('click','.sam',function(){

因为您是以动态方式点击。

Answer 3

.on()仅绑定已存在的元素，除非您委派操作。

这样的事情会起作用：

$('body').on('click', '.sam', function() {
    // your code here
}

jquery无法处理自动生成的DIV

3 个答案: