【发布时间】：2017-09-23 11:44:10
【问题描述】：
我正在尝试通过单击编辑按钮来更新外部对象。 它会弹出一个弹出窗口，我可以在其中输入新信息，然后它应该相应地更新用户。 但不知何故，它似乎不起作用。它只是触发页面刷新，什么都没有发生。 你能帮我解决这个问题吗？
var myData = [{
company: "ABC",
url: "www.abc.com",
type: "internal"
}, {
company: "CDE",
url: "www.cde.com",
type: "internal"
}, {
company: "DEF",
url: "www.def.com",
type: "external"
}, {
company: "EFG",
url: "www.efg.com",
type: "internal"
}, {
company: "FGH",
url: "www.fgh.com",
type: "external"
}];
$('#createData').click(function() {
createDisplay();
});
function createDisplay() {
myData.forEach(function(obj) {
$('.container').append(
$('<div>').addClass('box').append(
$('<label>').text('Company Website: '),
$('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
obj.type == 'external' ? $('<br /><button>').addClass('edit-btn').text('Edit').attr({"data-toggle":"modal", "data-target":"#updateData"}) : ''
)
)
});
}
$(document).on('click', '.edit-btn', function(){
var index = getIndex(this);
$("#updateForm").submit(function(index){
updateData(index);
return false;
});
});
function getIndex(item){
return $(item).parents('.box').index();
}
function updateData(obj) {
companyName = $('#companyName').val();
companyUrl = $('#companyUrl').val();
var upObj = {
company: companyName,
url: companyUrl,
type: "external"
}
myData.splice(index, 1, upObj);
createDisplay();
}.box {
height: 100px;
background-color: skyblue;
border: 1px solid black;
margin-top: 5px;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
</div>
<button id="createData">Create divs</button>
<!-- Modal -->
<div class="modal fade" id="updateData" tabindex="-1" role="dialog" aria-labelledby="update-data" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Update Data</h4>
</div>
<form id="updateForm">
<!-- Modal Body -->
<div class="modal-body">
<div class="form-group">
<label class="col-sm-4 control-label" for="companyName">Company Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="companyName" placeholder="Company Name" required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="companyUrl">Password</label>
<div class="col-sm-8">
<input type="url" class="form-control" id="companyUrl" placeholder="Company URL" required/>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button class="btn btn-primary">
Save changes
</button>
</div>
</form>
</div>
</div>
</div>【问题讨论】：
-
您的代码的哪一部分不起作用？
-
在问这样的问题之前，请确保您的类引用和 ID 引用都是正确的。
.edit-user、#newName、#newDob、#newImg.. 等是不匹配的选择器。难怪它不起作用。此外，您没有用值填充#updateForm的代码。并且在$(document).on('click', '.edit-user', function(){ ...之后没有关闭括号的语法错误 -
对错误深表歉意！我以某种方式混合了代码，这就是原因。我可以在这里使用 replaceWith() 吗？比如，jQuery(obj).replaceWith(upObj)？
-
我已经更新了代码和描述，让它变得更简单了。
标签： jquery arrays forms replace modal-dialog