jQuery .next()가 테이블에있을 때 작동하지 않습니다.

Question

각 드롭 다운 목록과 관련된 확인란이 있습니다. 사용자가 체크 박스를 클릭하면 체크 박스 값과 드롭 다운이 서버로 전송됩니다.

필자는 원래 각각을 ul로했지만 드롭 다운을 유지하기 위해 테이블로 변경했습니다. 내가 한 후에 다음 기능이 작동을 멈췄다. 요청의 var도 사라집니다. 값을 하드 코딩하면 백업을 보여줍니다.

$(document).delegate('.cbxAmenity', 'click', function() { 
    $("#dialogNotify").append(" Saving...").dialog(); 

    var thisAmenity = (this.id).replace("AmenityList_", ""); 

    $.ajax({ 
     url: 'ajax_url.php', 
     dataType: 'json', 
     data: { 
      ResortId: $("#id").val(), 
      action: 'save', 
      amenity: thisAmenity, 
      locality: $(this).next().val() // if i change to 'foo' it works 
     }, 
     success: function() { 
      $("#dialogNotify").dialog("close"); 
      ui.amenityDialog(); 
     }, 
     error: function() { 
      $("#dialogNotify").html("There was an error saving amenity"); 
     } 
    }); 

EDIT : 여기서

함수 인 다음 표는 ... 그 다른 Ajax 호출에 의해 생성 :

$("#dialogAmenity").html("<table id='amenityList'><tr><th>Amenity</th><th>Locality</th></tr>"); 
       for(var index=0; index<amenities.length; index++) { 
        $("#amenityList").append("<tr><td><input type='checkbox' name='AmenityList_"+ 
              amenities[index].AmenitiesID + "' id='AmenityList_"+ 
              amenities[index].AmenitiesID + "' class='cbxAmenity' /> "+ 
              amenities[index].Name + 
              "</td><td><select id='locality' name='locality'>"+ 
              "<option value='RESORT'>Resort</option>" + 
              "<option value='NEARBY'>Near by</option>" + 
              "</select></td></tr>"); 

        if (amenities[index].link == true) 
         $("#AmenityList_"+amenities[index].AmenitiesID).prop('checked', true); 

       } 
       $("#dialogAmenity").append("</table>"); 

EDIT 다시 : 여기 방화범

에서 HTML이고

<table id="amenityList"> 
    <tbody> 
    <tr> 
     <th>Amenity</th> 
     <th>Locality</th> 
    </tr> 
    <tr> 
     <td> 
     <input name="AmenityList_1" id="AmenityList_1" class="cbxAmenity" type="checkbox"> Indoor Pool 
     </td> 
     <td> 
     <select id="locality" name="locality"> 
      <option value="RESORT">Resort</option> 
      <option value="NEARBY">Near by</option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input name="AmenityList_2" id="AmenityList_2" class="cbxAmenity" type="checkbox"> Fitness Gym 
     </td> 
     <td> 
     <select id="locality" name="locality"> 
      <option value="RESORT">Resort</option> 
      <option value="NEARBY">Near by</option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input name="AmenityList_3" id="AmenityList_3" class="cbxAmenity" type="checkbox"> Beach Access 
     </td> 
     <td> 
     <select id="locality" name="locality"> 
      <option value="RESORT">Resort</option> 
      <option value="NEARBY">Near by</option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input name="AmenityList_4" id="AmenityList_4" class="cbxAmenity" type="checkbox"> Laundry Room 
     </td> 
     <td> 
     <select id="locality" name="locality"> 
      <option value="RESORT">Resort</option> 
      <option value="NEARBY">Near by</option> 
     </select> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

요소 는 <td> 태그의 마지막 요소입니다. 따라서 next() 요소가 없습니다. 당신은 다음 <td>에 <select> 요소를 찾기 위해

$(this).parent().next().find('select').val();

할 필요가있다.

Answer 2

테이블 생성 스크립트에 결함이 있습니다. 이 방법으로 닫기 태그를 추가 할 수 없습니다 $(...).append("</table>"). 클래스 cbxAminity와

var html = "<table id='amenityList'><tr><th>Amenity</th><th>Locality</th></tr>"); 
    for(var index=0; index<amenities.length; index++) { 
    html += "<tr><td><input type='checkbox' name='AmenityList_"+ 
      amenities[index].AmenitiesID + "' id='AmenityList_"+ 
      amenities[index].AmenitiesID + "' class='cbxAmenity'" + 

      (amenities[index].link == true ? "checked='checked'" : "") + 

      "/> "+ 
      amenities[index].Name + 
      "</td><td><select id='locality' name='locality'>"+ 
      "<option value='RESORT'>Resort</option>" + 
      "<option value='NEARBY'>Near by</option>" + 
      "</select></td></tr>"); 

    } 
    html += "</table>"; 
    $("#dialogAmenity").html(html);