我目前有一个 jQuery 函数,我可以在其中执行 AJAX 请求。成功后,我看到返回的数据是正确的,但是当我尝试将 data-id="new"
更改为新响应时,它什么也没做。
我在初始页面加载后将 data-id="new"
div 加载到 DOM 中。
我能够一直导航到 .each-requirement
并更改响应中的 HTML 但无法更改 .each-requirement
data-id .
HTML:
<div class="dashboard-container-toolbar dashboard-requirement-toolbar center">
<div class="select2-container requirements-select select2-allowclear" id="s2id_add-essential-requirement">
<a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1">
<span class="select2-chosen">CSS</span><abbr class="select2-search-choice-close"></abbr>
<span class="select2-arrow"><b></b></span></a><input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen1"></div>
<select id="add-essential-requirement" class="requirements-select select2-offscreen" data-placeholder="Add Essential Requirement" tabindex="-1">
<option></option>
<option value="cmYiaONlNtw5GP11-e">CAD</option>
<option value="zdttiUMKAR0sKlSu-e">CSS</option>
<option value="4MzgJIEyaL2vizhQ-e">Excel Spreadsheets</option>
<option value="j70U4vt5kWm7wLjB-e">Fireworks</option>
<option value="7nCu8QIIJQzAQAy3-e">Git</option>
<option value="1bZM8poaikJRLo5P-e">HTML</option>
</select>
</div>
<div class="requirement-container sans-serif center"><br><br>
<div class="each-requirement overflow-hidden" data-id="new">
<div style="margin-left:80px" class="name float-left" data-id="zdttiUMKAR0sKlSu-e">CSS</div>
<span style="margin-left:-37px;" id="skill-level-0" class="skill-level color-blue center sans-serif">Beginner</span>
<div style="margin: 20px auto 0" class="slide ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="slider-0" aria-disabled="false">
<div class="inner-slider-marker"></div>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a>
</div>
</div>
jQuery:
$(document).on('change', '.requirements-select', function(event){
event.preventDefault();
var $this = $(this);
var name = $this.select2('data').text;
var str = $this.val();
$('.initial-r-load').remove();
$this.parents('.dashboard-requirement-toolbar').siblings('.requirement-container').append('<div class="each-requirement overflow-hidden" data-id="new"></div>');
$this.parents('.dashboard-requirement-toolbar').siblings('.requirement-container').children('.each-requirement:last').addSlide(name, str);
$.ajax({
type: "POST",
url: base_url + "job/add_requirement",
dataType: "text",
data: {
skl_name: name,
skl_str: str,
j_str: window.location.pathname.split('/').pop()
},
cache:false,
success:
function(data){
var response = data;
/* THIS WORKS */ $this.parents('.dashboard-requirement-toolbar').siblings('.requirement-container').children('.each-requirement:last').html(response)
/* THIS DOESN'T WORK */ $this.parents('.dashboard-requirement-toolbar').siblings('.requirement-container').children('.each-requirement:last').data('id', response)
}
});
return false;
});
感谢任何帮助。谢谢。
最佳答案
只是复制注释,data
方法不会设置或改变属性值,它修改元素的内部数据结构,改变后不显示 data-*
属性。
因此,如果您需要更改标记,请改用 .attr('data-id', 'whatever-value')
。否则使用 .data()
方法,就像你做的那样,但是通过取回值来检查正确性,即 console.log(el.data('id'))
.
附注: 作为旁注,我建议您使用 closest()
方法而不是 parents()
。它会快速选择第一个匹配的父元素,而不是选择所有匹配的父元素。
关于javascript - AJAX 成功后无法设置数据 ID?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23081456/