[英]JQuery unable to get closest sibling
我有這個HTML,將重復幾次。 我希望.Categories類在ajax請求完成后更新最近的同級.Fields類。 我也嘗試過使用use.find,但是似乎都沒有用。
<div class="col-sm-12 row">
<div class="col-sm-3 search-spacing">
<label>Document Categories</label>
@Html.DropDownListFor(m => m.CategoryId, (SelectList)Model.Categories, "Select Category", new { @class = "form-control Categories" })
</div>
<div class="col-sm-3 search-spacing">
<label>Document Fields</label>
@Html.DropDownListFor(m => m.FieldId, (SelectList)Model.DocumentFields, "Select Field", new { @class = "form-control Fields" })
</div>
<div class="col-sm-3 search-spacing">
<label for="Data">Data</label>
<input type="text" id="Data" placeholder="Search" />
</div>
</div>
$("#datatable-search-input-container").on("change", ".Categories", function (e) {
console.log("changed");
selected = $(".Categories").find(":selected").val();
var form_data = selected;
refreshDropdown(form_data);
return false;
});
function refreshDropdown(Input) {
$.ajax({
url: "@Url.Action("GetFields", @ViewContext.RouteData.Values["controller"].ToString())",
method: "POST",
data: JSON.stringify(Input),
contentType: "application/json",
success: function (result) {
var parent = $(this).closest(".search-spacing");
parent.find(".Fields").empty();
console.log(parent);
},
error: function (error) {
console.log(error);
}
});
}
嘗試refreshDropdown.call(this, form_data)
那么this
你里面refreshDropdown
指element
的event
被觸發。 還要緩存它,因為this
會導致ajax listeners
更改。
$("#datatable-search-input-container").on("change", ".Categories", function (e) {
console.log("changed");
selected = $(".Categories").find(":selected").val();
var form_data = selected;
refreshDropdown.call(this, form_data);
return false;
});
function refreshDropdown(Input) {
var $element = $(this),
$nextFields = $element.parent().nextSibling().children(".Fields");
$.ajax({
url: "@Url.Action("GetFields", @ViewContext.RouteData.Values["controller"].ToString())",
method: "POST",
data: JSON.stringify(Input),
contentType: "application/json",
success: function (result) {
$nextFields.empty();
console.log(parent);
},
error: function (error) {
console.log(error);
}
});
}
我將更改您的函數以傳遞類別輸入:
$("#datatable-search-input-container").on("change", ".Categories", function (e) { console.log("changed"); var $thisCategory = $(this); refreshDropdown($thisCategory); return false; }); function refreshDropdown(Input) { var form_data = Input.find(":selected").val(); $.ajax({ url: "@Url.Action("GetFields", @ViewContext.RouteData.Values["controller"].ToString())", method: "POST", data: JSON.stringify(form_data), contentType: "application/json", success: function (result) { var parent = Input.parent(); parent.next().find(".Fields").empty(); console.log(parent); }, error: function (error) { console.log(error); } }); }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.