按钮关闭，按钮最小化和按钮设置不工作使用下面的javascript

Question

按钮关闭，按钮最小化和按钮设置不能使用下面的javascript。

我使用bootstrap 2.0.4

//datatable
    $('.datatable').dataTable({
            "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
            }
        } );
    $('.btn-close').click(function(e){
        e.preventDefault();
        if (e.target === this)
                $(this).parent().parent().parent().fadeOut();
    });
    $('.btn-minimize').click(function(e){
        e.preventDefault();
        var $target = $(this).parent().parent().next('.box-content');
        if($target.is(':visible')) $('i',$(this)).removeClass('icon-chevron-up').addClass('icon-chevron-down');
        else                       $('i',$(this)).removeClass('icon-chevron-down').addClass('icon-chevron-up');
        $target.slideToggle();
    });
    $('.btn-setting').click(function(e){
        e.preventDefault();
        $('#myModal').modal('show');
    });

编辑1:我试图使用这个模板表http://usman.it/themes/charisma/table.html您可以从这里下载table.html文件。另一件我无法理解的事情是，当我检查html代码时，没有搜索文本输入，没有页面导航。它们如何在浏览器中显示出来?

编辑2:我使用的是Google App Engine, Django, Jinja2

Answer 1

如果您动态地将button添加到DOM，那么click()可能无法工作。

试一下:

$(document).on("click", '.btn-close', function(e){
    e.preventDefault();
    if (e.target === this)
            $(this).parent().parent().parent().fadeOut();
});
$(document).on("click", '.btn-minimize', function(e){
    e.preventDefault();
    var $target = $(this).parent().parent().next('.box-content');
    if($target.is(':visible')) $('i',$(this)).removeClass('icon-chevron-up').addClass('icon-chevron-down');
    else                       $('i',$(this)).removeClass('icon-chevron-down').addClass('icon-chevron-up');
    $target.slideToggle();
});
$(document).on("click", '.btn-setting', function(e){
    e.preventDefault();
    $('#myModal').modal('show');
});

Answer 2

$('.datatable').dataTable({
        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span12 center'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
        "sLengthMenu": "_MENU_ records per page"
        }
    } );
$('.btn-close').click(function(e){
    e.preventDefault();
    $(this).parent().parent().parent().fadeOut();
});
$('.btn-minimize').click(function(e){
    e.preventDefault();
    var $target = $(this).parent().parent().next('.box-content');
    if($target.is(':visible')) 
      $('i',$(this)).removeClass('icon-chevron-up').addClass('icon-chevron-down');
    else
      $('i',$(this)).removeClass('icon-chevron-down').addClass('icon-chevron-up');
    $target.slideToggle();
});
$('.btn-setting').click(function(e){
    e.preventDefault();
    $('#myModal').modal('show');
});