Question

我这里有一个jsfiddle - http://jsfiddle.net/FTHVJ/

我知道这看起来有点疯狂，但我可以了解实际的代码。

我有一个改变＆＃39;选择菜单上的事件处理程序#menu_One

然后添加一个新的选择菜单#menu_Two，它在jquery中保存为变量。

然后我尝试添加更改＆＃39;此添加的选择菜单的事件处理程序。

on＆＃39;更改＆＃39;事件不会对添加的选择菜单起作用。

    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <!--jQuery-->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


      <!--css-->

      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        body{
          background:#eee;
        }
        #wrap{
          max-width:800px;
          margin:0 auto;
          background:#fff;
          height:1000px;
          padding:50px;
        }
        #new_select{
          height:50px;
          margin:20px 0 0 0;
          padding:10px 0 0 0;
          background:red;
        }
      </style>

      <title>Title of the document</title>
      </head>

    <body>

      <div id="wrap">

        <select id="menu_One">
          <option>Menu One 1</option>
          <option>Menu One 2</option>
          <option>Menu One 3</option>
          <option>Menu One 4</option>
          <option>Menu One 5</option>  
        </select>  

        <div id="new_select">
        </div>  
      </div>

    </body>


      <script>

        $(function(){

          var select_two = "<select id='menu_Two'>";
              select_two += "<option>Menu Two 1</option>";
              select_two += "<option>Menu Two 2</option>";
              select_two += "<option>Menu Two 3</option>";
              select_two += "<option>Menu Two 4</option>";
              select_two += "</select>";


          $('#menu_One').on('change', function(){
            $('#new_select').append(select_two);
          });


          $('#menu_Two').on('change', function(){
            alert('here');
          })

        });

      </script>



    </html>

Answer 1

对于动态创建的元素，您需要使用.on function：

$('#new_select').on('change', '#menu_Two', function(){
    alert('here');
});

事件侦听器只能附加到DOM中的元素，而不能附加到当时不存在的元素。

Answer 2

尝试：

$(document).on('change', '#menu_Two', function(){
        alert('here');
      });

的 DEMO FIDDLE

Answer 3

在添加DOM节点之前，不应添加事件处理程序：

$(function(){

  var select_two = "<select id='menu_Two'>";
      select_two += "<option>Menu Two 1</option>";
      select_two += "<option>Menu Two 2</option>";
      select_two += "<option>Menu Two 3</option>";
      select_two += "<option>Menu Two 4</option>";
      select_two += "</select>";


  $('#menu_One').on('change', function(){
    $('#new_select').append(select_two);
    $('#menu_Two').on('change', function(){
      alert('here');
    })
  });
});

小提琴： http://jsfiddle.net/cjcLU/

Answer 4

这就是我做的方式

<form id="form_id" action="userlogininput.cgi" name="form" method="post">
  Username :
  <input type="text" id="firstName" name="firstName" class="textboxH-300" required>
  <br> Password :
  <input type="password" id="password" name="password" class="textboxH-300" required>
  <br>
  <br>
  <input id="submitbtn" type="submit" value="Submit" />
</form>

更改时动态创建的选择菜单不起作用

4 个答案: