使用模式窗体更新数组中的对象并显示更新的详细信息

我正在尝试通过单击编辑按钮来更新外部对象。 它会弹出一个弹出窗口，我可以在其中输入新信息，然后相应地更新用户。 但不知何故它似乎没有用。 它只是触发页面刷新，根本没有任何反应。 你能帮帮我解决这个问题吗？

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( $('
').addClass('box').append( $('').text('Company Website: '), $('').addClass('compUrl').attr('href', obj.url).text(obj.company), obj.type == 'external' ? $('
').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; } 

    
 
 Create divs  
 
 
  
  × Close  
Update Data
 
 
  
 
 Company Name 
  
 
 
 Password 
  
 
 
  
  Close   Save changes  
 
 
 
  

Answer 1

好吧，我发现了这个问题。 这是我使用的变量索引。 它被过度使用我相信尝试提交表格，导致问题。

 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() { $('.container').empty(); myData.forEach(function(obj) { $('.container').append( $('
').addClass('box').append( $('').text('Company Website: '), $('').addClass('compUrl').attr('href', obj.url).text(obj.company), obj.type == 'external' ? $('
').addClass('edit-btn').text('Edit').attr({'data-toggle':'modal', 'data-target':'#updateData'}) : '' ) ) }); } var currentIndex; $(document).on('click', '.edit-btn', function(){ currentIndex = $(this).parents('.box').index(); }); $('#updateForm').submit(function(){ updateData(currentIndex); return false; }); function updateData(index) { 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; } 

    
 
 Create divs  
 
 
  
  × Close  
Update Data
 
 
  
 
 Company Name 
  
 
 
 Website 
  
 
 
  
  Close   Save changes