7

私はここにjsfiddleを持っています - http://jsfiddle.net/FTHVJ/

ここでデモ - http://ttmt.org.uk/select

これは少しクレイジーに見えることはわかっていますが、実際のコードに最も近いものです。

選択メニュー #menu_One に on 'change' イベント ハンドラーがあります。

これにより、jquery に変数として保存される新しい選択メニュー #menu_Two が追加されます。

次に、この追加された選択メニューに 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 に答える
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 に答える