Question

我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <h2>Hello</h2>
    <button type="button" id="example" class="btn btn-danger" data-container="body" data-html="true" data-toggle="popover" data-placement="right" data-content="&lt;form id='myform' class='form-horizontal'&gt;
&lt;input type='radio' id='rb1' name='keys' value='Adult' bind-value='key'&gt;
Adult  &lt;br&gt;
&lt;input type='radio' id='rb2' name='keys' value='Child' bind-value='key'&gt;
Child  &lt;br&gt;
&lt;input type='radio' id='rb3' name='keys' value='Concession' bind-value='key'&gt;
Concession  &lt;/form&gt;" data-original-title="Select seat type">Hello
    </button>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#example').popover();
        $('#myform input').on('change', function() {
            alert($('input[name=keys]:checked').val());
        });
    });
    </script>
</body>

</html>

我想在警报中显示所选单选按钮（置于弹出框中）的值。这段代码在某种程度上并没有提出警报。弹出窗口完美显示，单选按钮也正确显示。在弹出窗口中选择单选按钮时，仅显示警报。请帮忙！

Answer 1

问题在于何时初始化侦听器。表格不存在，直到显示弹出窗口。所以你需要在之后初始化事件监听器。

以下是摘录：

$(document).ready(function() {
  $('#example').popover();

  $('#example').on('shown.bs.popover', function() {
    $('#myform input').on('click', function() {
      alert($('input[name=keys]:checked').val());
    });
  });

});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>

<body>
  <h2>Hello</h2>
  <button type="button" id="example" class="btn btn-danger" data-container="body" data-html="true" data-toggle="popover" data-placement="right" data-content="&lt;form id='myform' class='form-horizontal'&gt;
&lt;input type='radio' id='rb1' name='keys' value='Adult' bind-value='key'&gt;
Adult  &lt;br&gt;
&lt;input type='radio' id='rb2' name='keys' value='Child' bind-value='key'&gt;
Child  &lt;br&gt;
&lt;input type='radio' id='rb3' name='keys' value='Concession' bind-value='key'&gt;
Concession  &lt;/form&gt;" data-original-title="Select seat type">Hello
  </button>
</body>

</html>

Answer 2

像这样;

$("input:radio[name=keys]").click(function() {
    var value = $(this).val();
    alert(value);
});

这里有类似的答案; In jQuery, how do I select an element by its name attribute?

Answer 3

    rules: {
        prsptEmail: {
            required: {
                depends: function(element){
                    if ($('#id-user').val() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
    },
    messages: {
        prsptEmail : {
            required : "please signIn!",
        }
    },

这是我如何设法完成你的目标。上面是我的代码，用于警告所选单选按钮的值。

想要从popover中的单选按钮获得结果

3 个答案: