本來目的是想要局部刷新,然後動態添加右邊“屬性”到左邊屬性一列,
比如這樣子一個界面
紅框(數據從DB中獲取)這一塊用VS自帶的AJAX控件來實現局部刷新,但是這個時候全局的jQuery腳本就會無效,如果通過:
this.ScriptManager1.ScriptPath = Server.MapPath("js/modalEditProductInfo.js");
來進行重新綁定腳本,那麼會發現,局部刷新功能會失效,一旦下拉框進行回傳,那麼整個頁面都會進行刷新。
好吧,反正我的目的隻是想動態點擊右邊屬性欄【操作】一列的【選擇】選項來進行動態添加選擇的屬性到左邊的【屬性】中,比如”顏色:紅色”就是動態添加實現的。
一開始我用livequery來實現,比如:
[javascript]
$(".chooseProperty").livequery(function () {
$(this).click(function () {
var pdId = $(this).attr("pdId"); //屬性字典id
var pdText = $.trim($(this).prev().prev().text()); //屬性字典text
var pdVal = $.trim($(this).prev().text()); //屬性字典text
var newHtml = "<p class='newProperty' ppId='" + pdId + "'><span class='chosenPropertyValText'>" + pdText + ":" + pdVal + "</span> <span class='spanCancel'>×</span></p>";
// alert(newHtml)
$("#chooseProperties").append(newHtml);
// alert(pdId + "@" + pdText + ":" + pdVal);
});
});
說livequery是每過20ms進行一次重新綁定,但是這裡有個問題,就按照上面的代碼來做的話,會發現一旦下拉框進行瞭回傳,點擊【選擇】還是沒有任何效果,但是這個時候如果點擊左邊的輸入框(有js效果的,比如名稱、品牌、價格我都是做瞭js驗證的,blur會觸發響應事件),然後再點擊右邊的【選擇】,發現有js效果瞭,這點有點鬱悶,待日後研究下原因。
最終用的方法是jQuery自帶的live()方法,比如:
[javascript]
$(".chooseProperty").live("click",function () {
var pdId = $(this).attr("pdId"); //屬性字典id
var pdText = $.trim($(this).prev().prev().text()); //屬性字典text
var pdVal = $.trim($(this).prev().text()); //屬性字典text
var newHtml = "<p class='newProperty' ppId='" + pdId + "'><span class='chosenPropertyValText'>" + pdText + ":" + pdVal + "</span> <span class='spanCancel'>×</span></p>";
// alert(newHtml)
$("#chooseProperties").append(newHtml);
// alert(pdId + "@" + pdText + ":" + pdVal);
});