[英]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.