jQuery live（ "クリック" ... jQueryダイアログへの新しいデータのリロードに失敗する

Question

基本的なフォーム機能をいくつかのjQueryフロントエンド関数で作成していますが、コードが破損している場所を見つけることはできません。予約予約用のリンクjQueryダイアログがポップアップし、チェックボックスの行にbunsenバーナーなどの機器名を入力します。各行にも2つのドロップダウンリストがあり、クライアントがアイテム数を選択できるようにします。チェックボックスは選択された行を無効から有効に変更します

無効/有効化行が最初から機能しない場合があります。ダイアログが閉じられると、コードが削除され、新しいダイアログが開いてフォームが開きます純粋に最後から残っているコードを除いて、いつも新鮮なフォームです。Th eチェックボックスの変更検出では、以前に何度も実装していた.live（ "change"を使用しますが、何らかの理由で2回目以降の試みでコードが失敗します。したがって、最初のフォームが閉じられた後、または新しいフォームが入力されて表示された後で、それは中断している必要があります。

私はjquery-1.7.1を使用しています。ダイアログライブラリはjquery-ui-1.8.16自分で作成したwebpartのカスタムビルドです。すべてのjqueryコードは$（document）.ready状態から実行されます。

3機能

• $(".bookingFunctions")リンクをクリックします。
• $("input:checkbox").live("change")は、行有効/無効
• $(".cancel").live("click")が、私は人口フォームのサンプルが

  私のコードオブジェクト、フォームを閉じて、DOM

からコードを削除するためにやっているものですです以下の通りです：

var $subInfo = null; 
    var id = null; 

// Open and Load the equipment list dialog 
$(".bookingFunctions").live("click", function() { 

    id = $(this).find(".itemId").text().trim(); 
    var name = $(this).find(".itemClassName").text(); 
    var inquiry = $(this).find("#itemInquiryName_" + id).text(); 

    $subInfo = $("<div id='equipmentList_" + id + "' class='equipmentList'></div>").dialog({ title: name + " Equipment List for " + inquiry, autoOpen: false, modal: true }); 
    $subInfo.html("<img src='/_layouts/Images/BGS.Booking.SharePoint/ajax-loader.gif' alt=''/>"); 

    $.post("/_layouts/BGS.Booking.SharePoint/requestHandler.ashx", 
     { 
      func: "getEquipList", 
      bid: id 
     }, function (data) { 
      $subInfo.html(data); 
     }); 

    $subInfo.dialog("option", "width", 660); 
    $subInfo.dialog("option", "height", 520); 
    $subInfo.dialog('open'); 

    // do live bind for change events on form 
    SetLiveChangeForCheckboxes(); 

    //return false; 

}); 
// Manage the dropdownlists associated with each checkbox (disable/enable) 
$("input:checkbox").live("change", function() { 
    var id = $(this).attr("id").substr(4); 

    if ($(this).attr("checked")) { 
     $("#numOf_" + id).removeAttr("disabled"); 
     $("#listType_" + id).removeAttr("disabled"); 
    } 
    else { 
     $("#numOf_" + id).attr("disabled", "disabled"); 
     $("#listType_" + id).attr("disabled", "disabled"); 
    } 
}); 
$(".cancel").live("click", function() { 
    $subInfo.dialog('close'); 
    $(".equipmentList").remove(); 
}); 

- ダイアログサンプル

<ul xmlns="http://www.w3.org/1999/xhtml" id="equipmentList"> 
    <li class="equipItem" id="item_10"> 
     <input type="checkbox" checked="checked" class="checkboxList" id="chk_10"/> 100 mL beaker 
     <select class="listType" id="listType_10"> 
      <option value="x">Choose</option> 
      <option value="1">Class</option> 
      <option selected="" value="2">Group</option> 
      <option value="3">Individual</option> 

     </select> 
     <img alt="" src="/_layouts/Images/BGS.Booking.SharePoint/per.png?p=0" class="fr"/>             
     <select class="numOf" id="numOf_10"> 
      <option value="1">0</option> 
      <option value="2">1</option> 
      <option selected="" value="3">2</option> 
      <option value="4">3</option> 
      <option value="5">4</option> 
      <option value="6">5</option> 
      <option value="7">6</option> 

      <option value="8">7</option> 
      <option value="9">8</option> 
      <option value="10">9</option> 
      <option value="11">10</option> 
      <option value="12">11</option> 
      <option value="13">12</option> 
      <option value="14">13</option> 
      <option value="15">14</option> 
      <option value="16">15</option> 

      <option value="17">18</option> 
      <option value="18">19</option> 
      <option value="19">20</option> 
      <option value="20">21</option> 

     </select> 
    </li> 
    <li class="equipItem" id="item_35"> 
     <input type="checkbox" class="checkboxList" id="chk_35"/> 100 mL measuring cylinder 
     <select disabled="disabled" class="listType" id="listType_35"> 
      <option value="x">Choose</option> 

      <option value="1">Class</option> 
      <option value="2">Group</option> 
      <option value="3">Individual</option> 

     </select> 
     <img alt="" src="/_layouts/Images/BGS.Booking.SharePoint/per.png?p=0" class="fr"/> 
     <select disabled="disabled" class="numOf" id="numOf_35"> 
      <option value="1">0</option> 
      <option value="2">1</option> 

      <option value="3">2</option> 
      <option value="4">3</option> 
      <option value="5">4</option> 
      <option value="6">5</option> 
      <option value="7">6</option> 
      <option value="8">7</option> 
      <option value="9">8</option> 
      <option value="10">9</option> 
      <option value="11">10</option> 

      <option value="12">11</option> 
      <option value="13">12</option> 
      <option value="14">13</option> 
      <option value="15">14</option> 
      <option value="16">15</option> 
      <option value="17">18</option> 
      <option value="18">19</option> 
      <option value="19">20</option> 
      <option value="20">21</option> 

     </select> 
    </li> 
    <img alt="Cancel" src="/_layouts/Images/BGS.Booking.SharePoint/cancel.png" class="cancel fr"/> 
    <img alt="Save" src="/_layouts/Images/BGS.Booking.SharePoint/save.png" class="save fr"/> 
</ul> 

Answer 1

ここで間違っていることはわかりません。ライブを使わずにこのようにコードを変更してみてください。

//..................... 

$.post("/_layouts/BGS.Booking.SharePoint/requestHandler.ashx", 
     { 
      func: "getEquipList", 
      bid: id 
     }, function (data) { 
      $subInfo.html(data); 

     $subInfo.dialog("option", "width", 660); 
     $subInfo.dialog("option", "height", 520); 
     $subInfo.dialog('open'); 

      BindChange(); 

     }); 
//......................... 


function  BindChange(){ 
$("input:checkbox").change(function() { 
    var id = $(this).attr("id").substr(4); 

    if ($(this).attr("checked")) { 
     $("#numOf_" + id).removeAttr("disabled"); 
     $("#listType_" + id).removeAttr("disabled"); 
    } 
    else { 
     $("#numOf_" + id).attr("disabled", "disabled"); 
     $("#listType_" + id).attr("disabled", "disabled"); 
    } 
}); 


} 

Answer 2

DOMの準備ができた後に何かが移入されているという事実は、すべてのイベントハンドラではなく、内容についてです.liveを、使用するための基準ではありません。それを使用する正当な理由はないようです。

また、必要なときに新しいダイアログを作成する理由もないようです。

ダイアログを1つ確立して再利用するのはもっと一般的です。構造体とイベントハンドラをそのまま残して、内容を変更するだけです。これがうまくいかない状況を考えることはできません。

Answer 3

SOそれは、問題が最初にフォームを閉じて が除去された後、それは発生しません何らかの理由.removeAttr（「無効」）機能、 で判明。私はまだこれの修正がまだありません！

試してみてください。

$('selector').attr("disabled", false); 

ではなくremoveAttr()。