我正在尝试使用jquery从下拉列表中获取选定的值。 由于某些原因，所选选项未打印到控制台。 Helppss

Question

我正在使用jquery和javascript。 我正在尝试使用jquery制作小费计算器，一次显示一页。 我正在访问该页面，该页面询问用户用户需要在聚会中输入多少人。

$(document).ready(function(){
  $(".begin").click(function(){
    $(".container").html("
      <h1 class = 'jumbotron'>How Many People Ate?</h1>
        <select class='form-control' id= 'foo'>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
       </select>");
    $(".container").append("
      <button class = 'btn btn-info next center-block'>
        Next
      </button>")
  });

  $(".next").click(function(){
    console.log($( "select#foo" ).val());});
  })

Answer 1

由于按钮是动态创建的，因此您必须使用事件委托，如下所示：

$(".container").on("click", ".next", function(){
    console.log($( "select#foo" ).val());});
});

在这里和这里阅读更多！

Answer 2

首先，您错过了一些分号（;）

我的回答：您必须将click事件绑定到.container，而不是按钮.next本身才能起作用：）

更改最后一个脚本，如下所示：

$(".container").on('click','.next',function() {
    console.log($( "select#foo" ).val());
});

因此完整的脚本将如下所示：

$(document).ready(function(){
    $(".begin").on('click',function(){
        $(".container").html("
           <h1 class = 'jumbotron'>How Many People Ate?</h1>
           <select class='form-control' id= 'foo'>
              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
           </select>");
        $(".container").append("
            <button class = 'btn btn-info next center-block'>Next</button>
        ");
    });
    $(".container").on('click','.next',function() {
        console.log($( "select#foo" ).val());
    });
});