Question

首先，如果这是一个补救问题，我很抱歉。我对JQuery和Javascript很新。

因此，在我的HTML文件中，我根据表单中的单选按钮选择切换了2个DIV

<div id = 'mySched'></div>
<div id = 'orView'></div>

我的表单最初是在HTML文件中设置的，就像上面的DIV一样：

<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。这很棒！

我的问题是我必须使HTML更具动态性，因此利用外部JS文件通过.innerhtml（）插入HTML。

因此，我想使用完全相同的DIV名称和表单名称，但现在FORM在我的外部JS文件中定义，而不是在HTML文件中定义。我现在将使用以下DIV引用FORM HTML代码：

<div id ='viewSelector'></div>

如何修改上面的JQuery脚本以正确切换两个选项，就像之前一样，引用现在嵌套在'viewSelector'DIV中的FORM？我相信这对你的JQuery高手来说很容易....我对此毫无头绪。

提前致谢。

Answer 1

如果元素是动态创建的（如果初始页面加载时没有单选按钮），则使用.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();
   }});
  });

Answer 2

你可以删除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

通过.innerhtml（）在子DIV中添加HTML表单时，使用JQuery切换DIV

2 个答案: