jquery自定义插件， 奇怪的bug
- JScript code
<!DOCTYPE html><html><head><title></title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript">(function ($) {jQuery.fn.extend({ //===================================================================== //插件名称: foldList //功能说明: 折叠表格单元格中的li标签 //输入参数: colIdx: int 类型, 从0开始, 需要折叠的list所在的列的索引 // showRowsNum: int类型, 折叠后显示行数(无此参数默认为显示3行); // spanGlobalFoldId: string类型, 其它地方控制折叠的元素id(无参数则无, 有此参数但找不到则在表格第一行对应列创建此元素); // startIsFold: boolean类型, 最开始是否折叠(无此参数默认为折叠) "foldList": function (colIdx, showRowsNum, spanGlobalFoldId, startIsFold) { var $tab = this; if (typeof (showRowsNum) == "undefined") { showRowsNum = 1; } if (typeof (startIsFold) == "undefined") { startIsFold = true; } //清空原来的附加元素 $tab.find("div.foldList").remove(); var foldHtml = "<div class='foldList' style='width:100%;text-align:center;border-top:1 solid gray;' fold='0' ><img border='0' alt='-'></div>"; $tab.find("tr").each(function () { //得到每一行的 指定列 var $td = $(this).find("td:eq(" + colIdx + ")"); var list = $td.find("li"); if ($td.length == 0 || list.length <= showRowsNum) { return true; } var $listParent = list.parent(); $td.append(foldHtml); $td.find("div.foldList").click(function () { var fold = $(this).attr("fold"); $listParent.find("li:gt(" + (showRowsNum - 1) + ")").toggle(fold == "1"); $(this).attr("fold", fold == "1" ? "0" : "1"); if ($(this).attr("fold") == "0") { $(this).find("img").attr("alt", "-"); } else { $(this).find("img").attr("alt", "+"); } }); }); //如果有其它地方需要全局控制 var spanGlobalHtml = "<span id='" + spanGlobalFoldId + "' fold='0' style='float:right;' ><img border='0' alt='-' ></span>"; if (typeof (spanGlobalFoldId) != "undefined") { if ($("#" + spanGlobalFoldId).length == 0) { $tab.find("tr:first").children(":eq(" + colIdx + ")").append(spanGlobalHtml); } $("#" + spanGlobalFoldId).click(function () { debugger; var fold = $(this).attr("fold"); $tab.find("div.foldList[fold='" + fold + "']").each(function () { $(this).click(); }); $(this).attr("fold", fold == "1" ? "0" : "1"); if ($(this).attr("fold") == "0") { $(this).find("img").attr("alt", "-"); } else { $(this).find("img").attr("alt", "+"); } }); } if (startIsFold) { $("#" + spanGlobalFoldId).click(); } return this; }});})(jQuery); //------------------- 调用 --------------------- $(function () { //页面加载， 还是可以用的 $("#tableList").foldList(1, 1, "spanGlobalFold", true); }); function test() { var tbodyHtml = "<tr><td>1</td><td style='cursor: pointer;'><ol><li>A</li><li style='display: list-item;'>B</li></ol></td></tr>"; tbodyHtml += "<tr><td>2</td><td><ol><li>A</li><li style='display: list-item;'>B</li></ol></td></tr>"; $("#tbodyList").html(tbodyHtml); // 再次绑定插件之后， 就有问题了---点击th上的全局控制图片， 似乎没有反应. // 经firebug跟踪， 所有相关的图片被执行了两次点击， 所以看起来没有反应。 // 实在不知道原因，请教各位大牛了。 $("#tableList").foldList(1, 1, "spanGlobalFold", false); }</script></head><body> <table id="tableList" cellspacing="1" cellpadding="2" border="1" style="width: 200px;" > <thead><tr><th>名称</th><th>列表</th></tr></thead> <tbody id="tbodyList"> <tr><td>1</td><td style='cursor: pointer;'><ol><li>A</li><li style='display: list-item;'>B</li></ol></td></tr> <tr><td>2</td><td><ol><li>A</li><li style='display: list-item;'>B</li></ol></td></tr> </tbody> </table> <input type="button" value="测试改动后的插件" onclick="test()" /></body></html>
[解决办法]
额 接住
[解决办法]
我来也，测试了一下。不过建议楼主还是也能吧错误所在发出来，让大家测试一下，方便学习！在此谢过了。