如何显示动态添加内容的提示框？
我有一个网页，其中一些内容是通过javascript函数调用添加的。页面上的某些项目分配了tipboxes。用于显示页面加载提示框后出现的提示框。而对于动态添加的内容，则不显示它们。我使用http://code.google.com/p/jquery-tipbox/downloads/list tipbox工具
听起来，如果没有例子，这个问题就不清楚了。所以，代码
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.tipbox.js" type="text/javascript"></script>
<script src="js/my_js_functions.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){
$("#ele1_id").tipbox("tipbox message 1", 0);
$("#ele2_id").tipbox("tipbox message 2", 0);
$("#inc1").tipbox("tipbox message 3", 0);
$("#inc2").tipbox("tipbox message 4", 0);
});
</script>
</head>
<body>
<center>
<div style="visibility:visible" >
<input id='ele1_id' type='radio' name='test' value='test1'
onClick=get_fields(id,checked)
> test 1 option <br>
<input id='ele2_id' type='radio' name='test' value='test2'
onClick=get_fields(id,checked)
>test 2 option <br>
</div>
</div></td><td alighn=center>
<div style='visibility:hidden' id='parameters'></div>
<div style='visibility:hidden' id='parameters_extra'></div>
</center>
</body>
</html>my_js_functions.js：
function add_fields(name,value){
var target=document.getElementById('parameters_extra');
var content2="";
if (name == 'ele1_id') {
if (value == 'sele1') {
content2="<table><tr><td id='inc1'>\
<b> text to which I want to have tipbox assigned (tipbox message 3) </b></td>\
<td><input type='text' maxlength=5 name='inp_value1' ></td></tr></table>";
}
else if (value == 'sele2') {
content2="<table><tr><td id='inc2'>\
<b> another text for which 'tipbox message 4' has to appear </b></td>\
<td><input type='text' maxlength=5 name='inp_value2' ></td></tr></table>";
}
}
target.innerHTML = content2;
target.style.visibility = "visible";
return false;
}
function get_fields(el,checked){
var target=document.getElementById('parameters');
var content;
var target2=document.getElementById('parameters_extra');
target2.style.visibility = "hidden";
if (checked){
if (el == 'ele1_id') {
content="<table><tr><td><b>select one of the options:</b></td><td>\
<select onChange=add_fields('ele1_id',this.options[this.selectedIndex].value) na
me='ele1_id'>\
<option selected='selected' value='None'>None</option>\
<option value='sele1'>Selection 1</option>\
<option value='sele2'>Selection 2</option>\
</select></td></tr></table>";
}
else if (el == 'ele2_id') {
content="<table><tr><td><b>select one of the options:</b></td><td> \
<select onChange=add_fields('ele2_id',this.options[this.selectedIndex].value)
name='ele2_id'> \
<option selected='selected' value='None'>None</option>\
<option value='sele1'>Selection A</option>\
<option value='sele2'>Selection B</option>\
</select></td></tr></table>";
}
target.innerHTML = content;
target.style.visibility = "visible";
}
return false;
}回答 1
Stack Overflow用户
发布于 2012-04-27 07:28:11
您需要使用jquery的委托函数在动态加载后加载脚本，或者在jquery中使用getScript ()/on()/live()将事件绑定到动态加载的元素。
折旧( http://api.jquery.com/delegate/ ) http://api.jquery.com/live/ (折旧) http://api.jquery.com/on/ http://api.jquery.com/jQuery.getScript/
您可以看到，问题出在jquery甚至javascript本身不能将事件附加到不存在的内容，因此，如果在jquery将事件附加到元素类型之后加载元素，则该事件不会附加到新元素。因此，为了解决这个问题，Jquery获取元素的父元素(通过委托/live/ on )，并动态附加事件。这真的很酷，因为它允许事件按需附加，而不是在有人在表或类似的每一行都附加事件的情况下，使用1000个事件绑定来拖累javascript。
或者，尽管更混乱、更不精确，而且如果这个动态内容只加载一次左右，效率肯定会更低，但您可以使用getScript()随内容一起动态加载脚本。:)
如果这对你有帮助，请告诉我。:)
https://stackoverflow.com/questions/10342718
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号