bootstrap data-toggle 起啥作用

Posted 2023-03-09

参考技术A 今天用bootstrap做一个弹出框，用于创建project，代码很简单：

<input type="button" class="btn add" name="add_project" value="Add"/>

<div id="add_proj" class="modal hide fade" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Add a project:</h3>
</div>
<div class="modal-body">
<p>Project name:
<input type="text" value="" name='projectName' />
</p>
<p>Game Title:
<input type="text" value="" name='gameTitle' />
</p>
<p>Description:
<input type="text" value="" name='description' />
</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>
<a href="#" class="btn btn-primary" name='save'>Ok</a>
</div>
</div>

然后在js里截获click事件， 在这个click里添加add project的代码：
?
$("input[name='add_project']").click(function()
$("#add_proj").modal("show");
$("a[name='save']").click(function()
var paras = ;
paras.projectName = $(this).parents("#add_proj").find("input[name='projectName']").val();
paras.gameTitle = $(this).parents("#add_proj").find("input[name='gameTitle']").val();
paras.description = $(this).parents("#add_proj").find("input[name='description']").val();
console.log(paras);
addProj(paras);

$("#add_proj").modal("hide");
);
);

　　在测试的时候发现，当$("#add_proj").modal("hide");的时候，modal并没有清除，而是保存了上次填写的值。然后重新show打开modal，填写值，继续点save的buton进行提交，会导致重复多次请求的情况，就是save的click事件被触发了n次（n为modal之前被点击过的次数累加之和）——

在网上搜了一下，bootstrap一般是通过下面这样的方式打开，data-toggle是一个很关键的属性，然后href来指定打开的modal的id：
?
<a data-toggle="modal" href="#add_proj" class="btn btn-primary">Add Project</a>

修改成这样的方式以后就ok了。

思考了下整个过程，应该是通过
?
$("#add_proj").modal("show");打开modal，再通过

?
$("#add_proj").modal("hide");关闭modal，其实是隐藏，并没有真的关闭。<BR><BR>至于为何多次请求，好像还是不太懂，难道bootstrap对于save的click事件用到事件队列或者列表存了下来么？求解释////<BR><BR><BR><A href="http://blog.csdn.net/friskit/article/details/7250688">http://blog.csdn.net/friskit/article/details/7250688</A> 这个博客讲的蛮多，回头研究一下。本回答被提问者和网友采纳