我下面有使用clone()
和delegate()
的代码。代码正在带有链接的jQuery UI对话框中加载。问题是 Ajax 被正确触发,它按预期调用成功方法,但没有显示任何 Ok 或 noOkdiv,我的意思是警报触发但div 的 css 没有改变,你认为我的问题在哪里?选择器有问题吗?谢谢
<input id="TaskId" name="TaskId" type="hidden" value="18" />
<div id="MainDiv">
<div id="toClone">
<div style="display: inline;">
<select id="Tasksess">
<option value="">لطفاً کار را انتخاب کنيد</option>
<optgroup label="کار های جديد">
<option value="16"style="">q3fe</option>
<option value="18"style="">fjhv j</option>
<option value="19"style="">wref</option>
<option value="25"style="">ff</option>
</optgroup>
<optgroup label="کار های در دست اقدام">
<option value="13"style="">rr</option>
<option value="15"style="">yy</option>
</optgroup>
<optgroup label="کار های تمام شده">
<option value="14"style="">tt</option>
<option value="18"style="">fjhv j</option>
</optgroup>
</select>
</div>
<div style="display: inline;">
<select id="Statusess" name="Statusess">
<option value="">لطفاً وابستگی را انتخاب کنيد</option>
<option value="1">پيشنياز</option>
<option value="2">همنياز</option>
</select>
</div>
<div style="display: none;" id="Ok">
ok
</div>
<div style="display: none;" id="noOk">
تکراری
</div>
<div id="loadingGif" style="display: none;">
<img src="/Content/Images/ajax-loader/253L.gif" alt=""/>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var Maindiv = $("#MainDiv");
var toClone = $("#toClone");
//$("#Statusess").each(function () {
$("#MainDiv").delegate('#Statusess', 'change', function () {
if ($(this).find(":selected").val() != "") {
if ($(this).parent().prev().find(":selected").val() != "") {
$(this).parent().parent().find("#loadingGif").attr("style", "display: inline;");
$.ajax({
url: '/ProjectAdmin/Project/AddTaskDependency?MainTaskId=' + $("#TaskId").val() + '&DependentTaskId=' + $(this).parent().prev().find(":selected").val() + '&Status=' + $(this).find(":selected").val(),
type: 'GET',
success: function (data, status) {
if (data != "0") {
$(this).parent().parent().find("#Ok").css('display', 'inline');
$(this).parent().parent().find("#noOk").css('display', 'none');
alert("1");
}
else if (data == "0") {
$(this).parent().parent().find("#Ok").css('display', 'none');
$(this).parent().parent().find("#noOk").css('display', 'inline');
alert("2");
}
var div = $('div:eq(0)', Maindiv).clone();
Maindiv.append(div);
}
});
$(this).parent().parent().find("#loadingGif").attr("style", "display: none;");
}
}
});
//});
});
</script>
你的主要问题在于你的选择器,是的。您可以添加额外的警报以在每个引用处吐出值,以查看出错的地方。
我对这种方法感到恼火,所以我对您的设置进行了一些更改,并且(除了没有您的 AskTaskDependancy 文件我无法测试的 ajax 部分)让它工作,我相信正如您所期望的那样。
首先,jsFiddle
注意:我将所有文本更改为英文。这对您的代码无关,我只是非英语文盲,所以请随时将其更改回来,因为它对代码没有影响。
更改日志
- 添加了错误
alert()
如果select
的值为空 -
$(this).find(":selected").val()
简单地$(this).val()
- 骆驼案例的几个参考名称
- MainDiv 中的所有 ID 到类
- 将类名从选择元素移动到保存每个元素的div
-
.parent.prev()
.parent.children(".tasksess")
(以及其他元素的类似参考方案) - 设置变量以便于参考每个div/选择
- 将 css() 更改为 attr()(用于隐藏/显示确定/不确定)
- 我在单独的行上构建了 ajax url,以便于阅读。
- 将
clone()
移到 ajax 请求之外以验证它是否有效(根据需要随意将其移回 - 请注意 loadGif 如果您不先隐藏它,它仍然显示在每个副本中) - 注释掉了 AJAX 测试请求
新的 HTML
<input id="TaskId" name="TaskId" type="hidden" value="18" />
<div id="MainDiv">
<div class="toClone">
<div class="tasksess" style="display: inline;">
<select name="tasksess">
<option value="">Select a Task</option>
<optgroup label="Group 1">
<option value="16"style="">q3fe</option>
<option value="18"style="">fjhv j</option>
<option value="19"style="">wref</option>
<option value="25"style="">ff</option>
</optgroup>
<optgroup label="Group 2">
<option value="13"style="">rr</option>
<option value="15"style="">yy</option>
</optgroup>
<optgroup label="Group 3">
<option value="14"style="">tt</option>
<option value="18"style="">fjhv j</option>
</optgroup>
</select>
</div>
<div class="statusess" style="display: inline;">
<select name="statusess">
<option value="">Select a Status</option>
<option value="1">opt8</option>
<option value="2">opt9</option>
</select>
</div>
<div class="ok" style="display: none;">
Everything looks good!
</div>
<div class="notOk" style="display: none;">
Something went wrong!
</div>
<div class="loadingGif" style="display: none;">
Loading...
<img src="/Content/Images/ajax-loader/253L.gif" alt=""/>
</div>
</div>
</div>
新的jQuery/JavaScript
$(document).ready(function () {
var Maindiv = $("#MainDiv");
var toClone = $(".toClone");
$("#MainDiv").delegate('.statusess', 'change', function () {
var thisSel = $(this).children("select");
var prevSel = $(this).parent().children(".tasksess").children("select");
var divOk = $(this).parent().children(".ok");
var divNotOk = $(this).parent().children(".notOk");
var divLoad = $(this).parent().children(".loadingGif");
if (thisSel.val() != "") {
console.log("status changed to val " + thisSel.val());
if (prevSel.val() != "") {
console.log("task is val "+prevSel.val());
divLoad.attr("style", "display: inline;");
var url = '/ProjectAdmin/Project/AddTaskDependency';
url += '?MainTaskId=' + $("#TaskId").val();
url += '&DependentTaskId=' + prevSel.val();
url += '&Status=' + thisSel.val();
console.log("URL= "+url);
/*
$.ajax({
url: url, type: 'GET',
success: function (data, status) {
if (data != "0") {
divOk.attr("style","display:inline;");
divNotOk.attr("style","display:none;");
}
else if (data == "0") {
divOk.attr("style","display:none;");
divNotOk.attr("style","display:inline;");
}
}
});
*/
divLoad.attr("style", "display: none;");
var div = $('div:eq(0)', Maindiv).clone();
Maindiv.append(div);
} else { alert("Select 1 val is empty"); }
} else { alert("Select 2 val is empty"); }
});
});
我不能肯定地说这是问题所在,但这肯定是您应该纠正的。如果我正确理解您的代码,您正在克隆#toClone
div。但是,在该div中有许多具有ID的孩子,包括您的#Ok
和#noOk
。Id 应该是页面唯一的,因此一旦克隆,您将不再拥有唯一的项目。因此,您应该将它们全部更改为类:
-
id="toClone"
到class="toClone"
-
id="Tasksess"
class="Tasksess"
-
id="Statusess"
到class="Statusess"
-
id="Ok"
到class="Ok"
-
id="noOk"
到class="noOk"
-
id="loadingGif"
到class="loadingGif"
(但是,我确实质疑,如果你真的希望Ok
、noOk
和loadingGif
成为toClone
div的孩子,或者你只是希望他们成为MainDiv
的唯一孩子。你的代码似乎是这样。如果是后者,那么你需要将toClone
div的结束</div>
标签更改为不包装唯一的Ok
、noOk
和loadingGif
元素。在这种情况下,您可以将 ID 留给这些唯一的孩子。
更改后,您将需要更改代码的其余部分,以选择类,而不是 id;但也选择作为新克隆子级的特定类。更改为类可能会解决您的问题,因为克隆创建的多个 id 项可能会使您的 jquery 找不到这些项。
以下行不正确:
$$("#MainDiv").delegate('#Statusess', 'change', function () {
将$$("#MainDiv")
更改为$("#MainDiv")
。