Question

我静态拥有此菜单，如下所示：

<div class="dropdown col-sm-3">
        <button type="button" 
            class="btn btn-select btn-block"
            data-toggle="dropdown">Plane <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-select" id="plane">
            <li><label class="dropdown-radio"> <input type="radio" value="3" name="plane"> Plane: A360 </label></li>
            <li><label class="dropdown-radio"> <input type="radio" value="2" name="plane"> Plane: AR45 </label></li>
            <li><label class="dropdown-radio"> <input type="radio" value="1" name="plane"> Plane: A380 </label></li>
        </ul>
    </div>
...

<script>
    $('.dropdown-radio').find('input').change(function() {
      var dropdown = $(this).closest('.dropdown');
      var radioname = $(this).attr('name');
      var checked = 'input[name=' + radioname + ']:checked';

      //update the text
      var checkedtext = $(checked).closest('.dropdown-radio').text();
      dropdown.find('button').text( checkedtext );

      //retrieve the checked value, if needed in page 
      var thisvalue = dropdown.find( checked ).val();
      console.log( thisvalue );
    });
</script>

此版本有效：用户可以选择一个（并且只有一个）选项，然后该选项将显示在主按钮中。我现在已经使用来自MySQL数据库的数据动态创建了相同的菜单。

<script>
var socket = io.connect('http://localhost:3000');

socket.on('sess', function(message) {

if(message == 0){
    alert('No planes associated.');
}else{
    for(var i = 0; i < message.length; i++){
        $('#session').prepend( '<li><label class="dropdown-radio" > <input type="radio" value="' 
        + message[i].idSession + '" name="session"> Session: ' 
        + message[i].idSession + ' </label></li>');
    }
    }
});
</script>

这里菜单仍然下拉，但是现在用户可以根据需要检查任意数量的无线电，并且第一个脚本未激活（控制台中什么都没有出现）。我尝试过将第二个脚本放在上一个脚本的前面和后面，两者都得到相同的结果。

是否有解决方法？我是Javascript（jQuery）及其敏感性的新手。

谢谢

Answer 1

我已将我的评论与答案结合在一起，以便于阅读/其他任何人阅读。

第一个脚本在页面加载内联时运行一次，并且由于对数据库的异步调用，这意味着它找不到任何绑定change的内容，因此该脚本不再运行。您需要更新脚本，以便在之后所有新的单选按钮都已加载到DOM中（这是在 time 之后，而不是在页）。

考虑将您的第一个脚本保存到一个函数中，并从数据库调用成功中调用它，然后渲染单选按钮。您可能还需要使用.off('change')来删除所有现有的更改绑定，然后再创建新的绑定。

关于允许多个选中的单选按钮，只要它们共享一个name，就不应按照documentation允许多个。

Answer 2

您想要的是将更改事件绑定到更高层次结构的元素，而不是直接绑定到尚不存在的输入：

$('#plane').on('change', 'input', function() {
      var dropdown = $(this).closest('.dropdown');
      var radioname = $(this).attr('name');
      var checked = 'input[name=' + radioname + ']:checked';

      //update the text
      var checkedtext = $(checked).closest('.dropdown-radio').text();
      dropdown.find('button').text( checkedtext );

      //retrieve the checked value, if needed in page 
      var thisvalue = dropdown.find( checked ).val();
      console.log( thisvalue );
    });

这样做是将change事件绑定到父div，因此无论以后如何修改其子对象都无所谓，如果目标元素是input（第二个函数参数）。

在加载输入内容之后，您无需执行此脚本，只需采用动态加载内容的初始方法，只需将change与on('change'版本进行调整即可。

Javascript：动态创建菜单时，菜单脚本不起作用

2 个答案: