当通过.innerhtml()在子DIV中添加HTML Form时，使用JQuery切换DIV
当通过.innerhtml()在子DIV中添加HTML Form时，使用JQuery切换DIV
提问于 2014-06-11 11:12:07
首先，如果这是一个补救性的问题，我很抱歉。一般来说，我对JQuery和Javascript都是非常陌生的。
因此，在我的HTML文件中，我有两个DIVs，我希望根据表单中的单选按钮选择来切换它们
<div id = 'mySched'></div>
<div id = 'orView'></div>我的表单最初是在HTML文件中设置的，上面的DIVs也是如此：
<form>
<input type='radio' id='userSched' name='viewSelect' value='userSched'>
<input type='radio' id='orActivity' name='viewSelect' value='orActivity'>
</form>最初，我发现了一个非常有用的JQuery脚本，我对其进行了修改，使其非常好地工作：
$(document).ready(function(){
$("#orView").hide();
$("mySched").show();
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="userSched"){
$("#orView").hide();
$("#mySched").show();
}
if($(this).attr("value")=="orActivity"){
$("#mySched").hide();
$("#orView").show();
}});
});因此，当所有内容都在HTML文件中时，它会工作，'userSched‘显示mySched DIV并选择'orActivity'，隐藏mySched DIV并显示orView DIV。这太棒了！
我的问题是我必须使超文本标记语言更加动态，从而利用外部JS文件通过.innerhtml()插入超文本标记语言。
因此，我希望使用完全相同的DIV名称和表单名称，但现在表单是在外部JS文件中定义的，而不是在HTML文件中定义的。现在，我将使用以下DIV引用表单HTML代码：
<div id ='viewSelector'></div>我如何修改上面的JQuery脚本，以正确地切换两个选项，就像以前一样，引用现在嵌套在'viewSelector‘DIV中的表单？我相信这对你的JQuery高手来说是很容易的……我对此一无所知。
提前谢谢。
回答 2
Stack Overflow用户
发布于 2014-06-11 11:15:46
如果元素是动态创建的，则使用.on()而不是.click()分配事件处理程序(如果在初始页面加载时没有单选按钮)
实际上--实事求是地说，总是使用.on()，这样会更好
此外，请使用.val()而不是.attr("value")
$(document).ready(function(){
$("#orView").hide();
$("#mySched").show(); // < there was a bug here , see your code
$(document).on('click', 'input[type="radio"]', function(){
if($(this).val() =="userSched"){
$("#orView").hide();
$("#mySched").show();
}
if($(this).val() =="orActivity"){
$("#mySched").hide();
$("#orView").show();
}});
});Stack Overflow用户
发布于 2014-06-11 13:04:01
您可以删除JQuery ready函数
<script type="text/javascript">
$("#orView").hide();
$("#mySched").show(); // < there was a bug here , see your code
$(document).on('click', 'input[type="radio"]', function(){
if($(this).val() =="userSched"){
$("#orView").hide();
$("#mySched").show();
}
if($(this).val() =="orActivity"){
$("#mySched").hide();
$("#orView").show();
}});
</script>尝试一下HERE
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24154067
复制相关文章
相似问题
腾讯云开发者
