jQuery append（）在bootstrap模式中不起作用

Question

我有一个bootstrap模式如下：

<div class="modal fade" id="container-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <ul class="modal_containers" id="list_ctns">
         <li><img src="images/container.png"></li>
         <li><img src="images/container.png"></li>
         <li><img src="images/container.png"></li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

单击特定按钮时会触发上述模态，可以将其视为某些元素的存储库。

我有一个提交按钮的表单。在单击该提交按钮时，我想将一个列表项追加到modal_body。

<div class="button-containers">
 <button class="btn btn-success" id="save_item" type="submit">Save</button>
</div>

所以，我写了这个简单的javascript片段，将列表项附加到模态。

$(document).ready(function(){
$('#save_item').click(function(e){
   $("#list_ctns").append("<li><img src="images/container.png"></li>")
});

});

我不确定，我在哪里弄错了。请帮我提一下你的建议。

干杯， SZ

Answer 1

当您将其作为字符串传递以设置值时，请记住引号。

"<li><img src="images/container.png"></li>"

应该是

"<li><img src='images/container.png'></li>"

或

"<li><img src=\"images/container.png\"></li>"

另外，不要忘记阻止提交按钮的默认操作。

$('#save_item').click(function(e) {
   e.preventDefault();
   $("#list_ctns").append("<li><img src='images/container.png'></li>")
});

Answer 2

按钮类型是提交的，因此当您单击它时，表单将提交，导致页面被重定向到＆＃34; action＆＃34;网址。

您可以创建一个JS函数来像这样处理它;

function handleModal(form)
{
    $("#list_ctns").append("<li><img src=\"images/container.png\"></li>");

    //Use $.AJAX() to submit the form without refreshing the page.

    return false; //this prevent the form from being submitted. Keep it if you are going to use $.AJAX() to submit the form or remove it if you want the form to submit normally.
}

然后通过向<form>节点添加onsubmit="return handleModal(this);"属性来调用它。