gpt4 book ai didi

javascript - jQuery append() 在 Bootstrap 模式中不起作用

转载 作者:搜寻专家 更新时间:2023-10-31 08:16:59 25 4
gpt4 key购买 nike

我有一个 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>")
});

});

The current Modal

我不确定我在哪里犯了错误。请帮助我提出您的建议。

干杯,深圳

最佳答案

当您将其作为字符串传递以设置值时,请注意引号。

"<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>")
});

关于javascript - jQuery append() 在 Bootstrap 模式中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31794225/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com