2013-04-05 97 views
0

我正在製作一個數據可視化工具,您可以在其中輸入自己的數據。數據值存儲在如下的無序列表中:<ul><li data-name='name'><a href='#' onclick='showEditDv(this);'>Edit</a><span class='name'>name</span><span class='seperator'> | </span><span class='value'>7</span></li></ul。列表中可以有多個列表項。當你點擊編輯按鈕時,它會調用showEditDv()函數,給自己一個參考。在我展示的功能,我會說,data對象是這樣安排:爲什麼我的代碼循環兩次?

data -> 
    name: "root", 
    children: [ {name: "something", size: "7"}, 
     {name: "something-else", size: "999"} ] 

這是函數的代碼:

function showEditDv(object) { 
    var name = $(object).parent().attr("data-name"), 
     input = new Opentip($(object), {removeElementsOnHide: true, target: null, showOn: null, hideTrigger: "closeButton"}), 
     disabled = (data.children[getChildIndexByName(name)].hasOwnProperty("children")) ? "disabled" : ""; 

    input.setContent("<label>Name:</label><input type='text' data-prevname='" + name + "' value='" + name + "' class='dv-add-name' /><label>Value:</label><input " + disabled + " type='text' class='dv-add-value' value='" + data.children[getChildIndexByName(name)].size + "' /><button class='callEditDv'>Apply</button>"); // Set content of opentip 

    input.show(); 

    $("body").on("click", ".callEditDv", function() { 
     var newname = $(this).siblings(".dv-add-name").val(), 
      prevname = $(this).siblings(".dv-add-name").attr("data-prevname"), 
      value = $(this).siblings(".dv-add-value").val(); 

     if (newname !== prevname) 
     { 
      data.children[ getChildIndexByName(prevname) ].name = newname; // Update name 

      $(object).parent().attr("data-name", newname); // Update parent data 

      $(object).siblings(".name").text(newname); // Update form 
     } 

     if (data.children[ getChildIndexByName(newname) ].size !== value) 
     { 
      data.children[ getChildIndexByName(newname) ].size = value; 
      $(object).siblings(".value").text(value); 
     } 
     input.hide(); 
    }); 
} 

它採用Opentip,這僅僅是一個的方式創建動態彈出窗口/工具提示。問題在於,一旦您更改了一次數據值,當您嘗試再次更改它時,它會遍歷代碼兩次!第一次一切按預期工作,但第二次再次使用時,使用相同的prevname,這意味着getChildIndexByName返回undefined並且它不能設置導致錯誤的變量。 getChildIndexByName通過檢查名稱的值data.children循環直到找到匹配,然後返回數組中的對象的索引。

在此先感謝!

回答

2

嘗試此:使用帶有.bind()可以與被移除.unbind()

$("body").off('click').on("click",... 

jQuery Documentations

事件處理程序。 (在jQuery 1.7中,。對()和.off()方法是優選的,以 附着和上元件移除事件處理程序。)

+0

這也有用,謝謝! – microbug 2013-04-05 09:33:17

+0

很高興幫助! – 2013-04-05 09:34:59

1

變化:

$("body").on("click",... 

$("body").unbind('click').on("click", 

希望這有助於!

+0

由於*所以*多! – microbug 2013-04-05 09:26:58

相關問題