javascript - jQuery DataTable 在尝试隐藏列时多次触发

Question

更新这是另一个例子，只有几行代码......警报弹出两次!

$(document).ready( function () 
    {
        var x = $('#example').dataTable(
        {
            fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) 
            {
                // Row click
                    $(nRow).on('click', function() 
                {
                    alert(aData);
                        console.log('Row Clicked. Look I have access to all params, thank You closures.', this, aData, iDisplayIndex, iDisplayIndexFull);
                    });
            }
        }); 

        x.fnSetColumnVis( 0, false ); //This line of code causes the click to be called twice
    });

---

我正在尝试创建一个可以单击的 jQuery 数据表。我还需要隐藏几列...

我的思考过程是这样的......

定义一个 javascript 变量，我称之为 tb 并将其分配给 jQuery $('mytable').dataTable(...);然后使用 tb 通过这样的方法调用删除我不需要的列... tb.fnSetColumnVis( 0, false );。问题是，如果我这样做，我的 onclick 方法会被调用多次!所以我不得不将其注释掉，但现在我的所有专栏都可见。

所以我需要一种方法来隐藏列并定义点击。

var tb = $('#myrecords-table-table').dataTable(
{

    fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) 
    {
        // Row click
        $(nRow).on('click', function() 
        {
                $( "#tabsright" ).tabs({ active : 0 });
                $("#newrecordform").show();
                $("#nr_name").val(aData[2]);
                $("#create_ri_reportid").val(aData[0]);

                //Update summary field
                getSummary(aData);

                var i;
                var select = document.getElementById("nr_s_actors");
                for(i=0;i<select.options.length;i++)
                {
                    select.options[i].selected=false;
                }


                $("#nr_s_actors").multiselect("refresh");
                 //Get the actors that are selected
                 $.ajax(
                 { 
                    url: 'phpscripts/getreportrelations.php', 
                    data: 'reportid=' + aData[0], 
                    dataType: 'json', 
                    success: function(data) 
                    {               
                        $.each(data,function(index,value)
                        {
                                var id="id_actor_"+value[0];                                    
                                document.getElementById(id).selected = true;                                                        
                                $("#nr_s_actors").multiselect("refresh");
                        });
                    },
                    error: function (header, status, error) 
                    {
                        console.log('ajax answer post returned error ' + header + ' ' + status + ' ' + error);
                    }
                });


                //TODO find out why this is being called multiple times. Most likely because jQuery script is being included multiple times
                //TODO find out how to clear the screen
                 $.ajax(
                 { 
                    url: 'phpscripts/getreportinstances.php', 
                    data: 'reportid=' + aData[0], 
                    dataType: 'json', 
                    success: function(data) 
                    {       
                        /*while(document.getElementById("current_ris_div").firstNode())
                        {
                            document.getElementById("current_ris_div").removeChild(document.getElementById("current_ris_div"));
                        }*/

                        for(var y in data)
                        {
                            console.log(data[y],"is the y in data");
                            var element = document.createElement("DIV");
                            element.name = "reportinstance_"+y;
                            element.id = "reportinstance_"+y;
                            element.innerHTML = data[y]['summary']+"<br/>";
                            element.innerHTML = element.innerHTML + data[y]['location']+"<br/>";
                            element.innerHTML = element.innerHTML + data[y]['summary']+"<br/>";
                            for(var x in data[y]['people'])
                            {
                                element.innerHTML = element.innerHTML + data[y]['people'][x] +"<br/>";
                            }
                            for(var x in data[y]['behavior'])
                            {
                                element.innerHTML = element.innerHTML + data[y]['behavior'][x] +"<br/>";
                            }
                            for(var x in data[y]['media'])
                            {
                                element.innerHTML = element.innerHTML + "<image src=\""+data[y]['media'][x] +"\"/><br/>";
                            }


                            document.getElementById("current_ris_div").appendChild(element);
                        }




                        /*$.each(data,function(index,value)
                        {
                                console.log(data);
                                var element = document.createElement("DIV");
                                element.name = "reportinstance_"+index;
                                element.id = "reportinstance_"+index;
                                element.innerHTML = value['summary']+"<br/>";
                                element.innerHTML = element.innerHTML + value['location']+"<br/>";
                                element.innerHTML = element.innerHTML + value['summary']+"<br/>";
                                for(var x in value['people'])
                                {
                                    element.innerHTML = element.innerHTML + value['people'][x] +"<br/>";
                                }
                                for(var x in value['behavior'])
                                {
                                    element.innerHTML = element.innerHTML + value['behavior'][x] +"<br/>";
                                }
                                for(var x in value['media'])
                                {
                                    element.innerHTML = element.innerHTML + "<image src=\""+value['media'][x] +"\"/><br/>";
                                }


                                document.getElementById("current_ris_div").appendChild(element);    
                        });*/
                    },
                    error: function (header, status, error) 
                    {
                        console.log('ajax answer post returned error ' + header + ' ' + status + ' ' + error);
                    }
                });

                //Now set the media type
                var ii;
                var selecti = document.getElementById("nr_s_mediatypes");
                for(ii=0;ii<selecti.options.length;ii++)
                {
                    selecti.options[ii].selected=false;
                }
                console.log("What index should I use", aData);
                var iidd = "id_mediatype_"+aData[4];
                console.log(iidd);
                document.getElementById(iidd).selected = true;
                $("#nr_s_mediatypes").multiselect("refresh");

        });
    }
}); 
//tb.fnSetColumnVis( 0, false );
//tb.fnSetColumnVis( 1, false );
//tb.fnSetColumnVis( 4, false );

Answer 1

我不确定为什么会这样。您的示例代码太长，难以阅读。

使用这个 Plunker作为进一步问题的基础，并删除代码中不执行任何操作的所有内容。

如您所见，Plunker 可以正常工作。我确实向前迈进了一步，更改了单击以绑定(bind)并添加了一个解除绑定(bind)(只是为了安全起见，但脚本也可以在没有它的情况下工作)

fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
  //This is not realy necessary
  $(nRow).unbind('click');
  $(nRow).bind('click', function() {
    alert ('clicked');
  });
}