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"); 
     } 
    }); 

編輯：下面是表...它的另一個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>"); 

再次編輯：下面是來自螢火蟲

的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

元素與cbxAminity類是<td>標籤的最後一個元素。因此，它沒有next()元素。你需要做的

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

爲了找到<select>元素在未來<td>。

Answer 2

您的表格創建腳本包含一個缺陷。您不能以這種方式附加結束標籤$(...).append("</table>")。

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);