回發後丟失jQuery功能

我看到一羣人在線報告此問題，但沒有實際的解決方案。我沒有使用AJAX或更新面板，只是在選定索引更改時發佈的下拉菜單。我的HTML是回發後丟失jQuery功能

<div id="myList"> 
       <table id="ctl00_PlaceHolderMain_dlFields" cellspacing="0" border="0" style="border-collapse:collapse;"> 
    <tr> 
     <td> 
         <tr> 
          <td class="ms-formlabel" style="width: 175px; padding-left: 10px"> 
           <span id="ctl00_PlaceHolderMain_dlFields_ctl00_lblDestinationField">Body</span> 

          </td> 
          <td class="ms-formbody" style="width: 485px"> 
           <input name="ctl00$PlaceHolderMain$dlFields$ctl00$txtSource" type="text" id="ctl00_PlaceHolderMain_dlFields_ctl00_txtSource" class="ms-input" style="width:230px" /> 
           <select name="ctl00$PlaceHolderMain$dlFields$ctl00$ddlSourceFields" id="ctl00_PlaceHolderMain_dlFields_ctl00_ddlSourceFields" class="ms-input"> 
      <option value="Some Field Name 1">Some Field Name 1</option> 
      <option value="Some Field Name 2">Some Field Name 2</option> 
      <option value="Some Field Name 3">Some Field Name 3</option> 
      <option value="Some Field Name 4">Some Field Name 4</option> 

     </select> 
           <a href="#" id="appendSelect">append</a> 
          </td> 
         </tr> 
        </td> 
    </tr><tr> 
     <td> 
         <tr> 
          <td class="ms-formlabel" style="width: 175px; padding-left: 10px"> 
           <span id="ctl00_PlaceHolderMain_dlFields_ctl01_lblDestinationField">Expires</span> 

          </td> 
          <td class="ms-formbody" style="width: 485px"> 
           <input name="ctl00$PlaceHolderMain$dlFields$ctl01$txtSource" type="text" id="ctl00_PlaceHolderMain_dlFields_ctl01_txtSource" class="ms-input" style="width:230px" /> 
           <select name="ctl00$PlaceHolderMain$dlFields$ctl01$ddlSourceFields" id="ctl00_PlaceHolderMain_dlFields_ctl01_ddlSourceFields" class="ms-input"> 
      <option value="Some Field Name 1">Some Field Name 1</option> 
      <option value="Some Field Name 2">Some Field Name 2</option> 
      <option value="Some Field Name 3">Some Field Name 3</option> 
      <option value="Some Field Name 4">Some Field Name 4</option> 

     </select> 
           <a href="#" id="appendSelect">append</a> 
          </td> 
         </tr> 
        </td> 
    </tr><tr> 
     <td> 
         <tr> 
          <td class="ms-formlabel" style="width: 175px; padding-left: 10px"> 
           <span id="ctl00_PlaceHolderMain_dlFields_ctl02_lblDestinationField">Title</span> 

          </td> 
          <td class="ms-formbody" style="width: 485px"> 
           <input name="ctl00$PlaceHolderMain$dlFields$ctl02$txtSource" type="text" id="ctl00_PlaceHolderMain_dlFields_ctl02_txtSource" class="ms-input" style="width:230px" /> 
           <select name="ctl00$PlaceHolderMain$dlFields$ctl02$ddlSourceFields" id="ctl00_PlaceHolderMain_dlFields_ctl02_ddlSourceFields" class="ms-input"> 
      <option value="Some Field Name 1">Some Field Name 1</option> 
      <option value="Some Field Name 2">Some Field Name 2</option> 
      <option value="Some Field Name 3">Some Field Name 3</option> 
      <option value="Some Field Name 4">Some Field Name 4</option> 

     </select> 
           <a href="#" id="appendSelect">append</a> 
          </td> 
         </tr> 
        </td> 
    </tr> 
</table></div>

上面的Div標記是靜態的，並且該表是從DataList對象生成的。在回傳數據列表重新加載使用新的數據集，例如

<div id="myList"> 
       <table id="ctl00_PlaceHolderMain_dlFields" cellspacing="0" border="0" style="border-collapse:collapse;"> 
    <tr> 
     <td> 
         <tr> 
          <td class="ms-formlabel" style="width: 175px; padding-left: 10px"> 
           <span id="ctl00_PlaceHolderMain_dlFields_ctl00_lblDestinationField">Notes</span> 

          </td> 
          <td class="ms-formbody" style="width: 485px"> 
           <input name="ctl00$PlaceHolderMain$dlFields$ctl00$txtSource" type="text" id="ctl00_PlaceHolderMain_dlFields_ctl00_txtSource" class="ms-input" style="width:230px" /> 
           <select name="ctl00$PlaceHolderMain$dlFields$ctl00$ddlSourceFields" id="ctl00_PlaceHolderMain_dlFields_ctl00_ddlSourceFields" class="ms-input"> 
      <option value="Some Field Name 1">Some Field Name 1</option> 
      <option value="Some Field Name 2">Some Field Name 2</option> 
      <option value="Some Field Name 3">Some Field Name 3</option> 
      <option value="Some Field Name 4">Some Field Name 4</option> 

     </select> 
           <a href="#" id="appendSelect">append</a> 
          </td> 
         </tr> 
        </td> 
    </tr><tr> 
     <td> 
         <tr> 
          <td class="ms-formlabel" style="width: 175px; padding-left: 10px"> 
           <span id="ctl00_PlaceHolderMain_dlFields_ctl01_lblDestinationField">URL</span> 

          </td> 
          <td class="ms-formbody" style="width: 485px"> 
           <input name="ctl00$PlaceHolderMain$dlFields$ctl01$txtSource" type="text" id="ctl00_PlaceHolderMain_dlFields_ctl01_txtSource" class="ms-input" style="width:230px" /> 
           <select name="ctl00$PlaceHolderMain$dlFields$ctl01$ddlSourceFields" id="ctl00_PlaceHolderMain_dlFields_ctl01_ddlSourceFields" class="ms-input"> 
      <option value="Some Field Name 1">Some Field Name 1</option> 
      <option value="Some Field Name 2">Some Field Name 2</option> 
      <option value="Some Field Name 3">Some Field Name 3</option> 
      <option value="Some Field Name 4">Some Field Name 4</option> 

     </select> 
           <a href="#" id="appendSelect">append</a> 
          </td> 
         </tr> 
        </td> 
    </tr> 
</table></div>

回發，並在DataList重新加載後，我的JQuery不工作了。沒有錯誤，沒有。我沒有看到任何應該導致這種情況的HTML中對象的實際更改。我該如何解決？任何變通辦法或bandaides我可以申請？我的JQuery低於

<script type='text/javascript'> 
    $(document).ready(function() { 
     $('#myList a').live("click", function() { 
      var $selectValue = $(this).siblings('select').val(); 
      var $thatInput = $(this).siblings('input'); 
      var val = $thatInput.val() + ' |[' + $selectValue + ']|'; 
      $thatInput.val(jQuery.trim(val)); 
     }) 
    }); 
</script>

謝謝!!

來源

2011-02-18 David Lozzi

你有沒有試過用Firebug調試它，看看jQuery是否正確加載，以及你的準備工作是否正在執行？ – Raphael 2011-02-18 15:24:27

如果我要在重新加載數據時猜測出您的問題，請將事件鏈接切斷到對象。即使您的代碼正在鏈接到一個ID，而不是DOM中的特定元素。封面上的jQuery將該事件放在選擇器找到的每個對象上。如果你重新渲染一段含有該對象的html。您需要將該事件重新連接到新的HTML。我爲此使用的JavaScript看起來更像這樣。

<script type='text/javascript'> 
function eventRegistration() 
{ 
    $('someSelectoHere').click(WorkFunction); 
} 
function WorkFunction() 
{ 
    //Randome code here to do yoru work. 
    //If no callback function is used. 
    eventRegistration() 
    //if there is a call back function from the server put the eventRegistration() in that function. 
} 

$(document).ready(eventRegistration()); 
</script>

這就是我在解決問題時的方法。

來源

2011-02-18 15:40:22 Erin

我似乎無法得到這個工作。看看我上面的JQuery代碼，那會是什麼樣子？ – 2011-02-18 18:46:55

我以前遇到過類似的問題（特別是在Internet Explorer上）。這不是一個很好的解決方法，但您可以嘗試的一件事是在加載新的DOM元素之後重新運行JavaScript以添加點擊處理程序。

來源

2011-02-18 15:27:22

如何重新運行JavaScript來添加點擊處理程序後加載新的DOM元素 – 2011-02-18 15:34:48

只是猜測，但如果您通過UpdatePanel導致部分回發，那麼文檔就緒將不會再次觸發。你將需要使用pageLoad函數中，而不是所有的回傳，全部或部分後，將火...

function pageLoad() { 
    //your code here 
}

編輯：我看到你正在使用.live所以上面我的回答可能不適用，但頁面加載不在部分回發場景中變得有用

來源

2011-02-18 15:27:24 stephen776

不使用updatepanel，這是一個正常的asp.net回發事件 – 2011-02-18 15:34:14

回發後丟失jQuery功能

回答

相關問題