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

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

我知道这看起来有点疯狂,但它是我可以得到的实际代码.

我在选择菜单#menu_One上有一个’更改’事件处理程序

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

然后我尝试在这个添加的选择菜单中添加一个’更改’事件处理程序.

on’change’事件不适用于添加的选择菜单.

<!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>

解决方法

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

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

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

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

解决方法

猜你在找的jQuery相关文章