jquery ui 出现的诡异问题-优快云博客

本文解决了jQueryUI与dataTables在按钮样式和交互上出现的问题，通过调整.button()的调用时机来确保样式一致且按钮可点击，并介绍了如何为自定义表格中的新元素正确应用样式。

1. jquery ui 和dataTables 一起使用出现了以下状况：

For example. I used to open dialog with ”jquery ui”, then the problem is here, it doesn’t work well with “dataTables”.

When I click “next” button , Strange thing happened here. The edit and del buttons on secondary page are not with the same style as the previous page, and it is unclickable.

后来发现jquery ui 的样式是在.button()时才对这个对象添加class，从而添加了样式的。

于是代码这样改：

 var bookmark_table = $("#bookmark_table").dataTable({
            "fnDrawCallback": function(){
                $("input[type= 'button']").button().click(function(){
                    var value = $(this).val();
                    var txt = $(this).html();
                    var tds = $('td', $(this).parents("tr"));
                    var id = $(tds[0]).html();
                    var type = $(tds[1]).html();
                    var sub_type = $(tds[2]).html();
                    var third_type = $(tds[3]).html();
                    var bookmark_name = $(tds[4]).html();
                    var description = $(tds[5]).html();
                    var rowIndex = $(this).parents("tr").prevAll().length;

                    if(value == "Edit"){
                        eForm = $("#edit_form").dialog("open"); // dialog only return a jquery obj
                        if(eForm.dialog("isOpen")){
                            eForm.find("input[name='bookmark_id']").val(id);
                            eForm.find("select").val(type);
                            eForm.find("input[name='bookmark_sub_type']").val(sub_type);
                            eForm.find("input[name='bookmark_third_type']").val(third_type);
                            eForm.find("input[name='bookmark_name']").val(bookmark_name);
                            eForm.find("input[name='bookmark_description']").val(description);
                            eForm.find("input[name='rowIndex']").val(rowIndex);
                        }
                    }else if(value == "Del"){
                        dForm = $("#del_confirm").dialog("open");
                        dForm.find("input[name='rowIndex']").val(rowIndex);
                    }
                });
            }
        });

　也就是将.button()注册在fncallback这个函数里，这样的话，当翻页时，表格重新绘制完成会加载新样式。

2. 同样是一个原理，在页面添加$(".button").button(); 结果是 add 和import 变形了，但是delete没有。