7

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

并在这里演示 - http://ttmt.org.uk/select

我知道这看起来有点疯狂，但它是我最接近实际代码的地方。

我在选择菜单上有一个 on 'change' 事件处理程序#menu_One

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

然后我试图在这个添加的选择菜单中添加一个 on 'change' 事件处理程序。

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

4 回答 4

27

对于动态创建的元素，您需要使用以下.on函数：

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

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

于 2013-09-11T16:25:10.087 回答
23

尝试：

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

DEMO FIDDLE

于 2013-09-11T16:24:21.893 回答
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/

于 2013-09-11T16:23:31.770 回答
0

我就是这样做的

$(document).on('change', "body", function(){
            $( ".ui-selectmenu" ).selectmenu();
        });
于 2016-04-24T09:40:03.717 回答