Dynamisch erstellte Menü auswählen auf ändern funktioniert nicht

Habe ich ein jsfiddle hier - http://jsfiddle.net/FTHVJ/

Und demo hier - http://ttmt.org.uk/select

Ich weiß, das sieht ein wenig verrückt, aber es ist cloest konnte ich auf den eigentlichen code.

Habe ich eine auf 'change' event-handler, die auf einer select-Menü #menu_One

Dieser fügt dann einen neuen select-Menü #menu_Two gespeichert in jquery als variable.

Dann werde ich versuchen, fügen Sie ein 'change' - Ereignis-handler zu diesem Hinzugefügt, wählen Sie Menü.

Die auf 'change' - Ereignis funktioniert nicht auf den thw Hinzugefügt, wählen Sie Menü.

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

InformationsquelleAutor ttmt | 2013-09-11

jquery select

26

Für dynamisch erzeugte Elemente, die Sie verwenden müssen, die .auf - Funktion:
```
$('#new_select').on('change', '#menu_Two', function(){
    alert('here');
});
```
Ereignis-Listener können nur beigelegt werden, Elemente, die sich in den DOM, nicht die Elemente, die nicht gleichzeitig vorhanden.

Ich denke, diese Antwort ist besser als die $(document).on code, da die spezifischeren Selektor sollte effizienter sein.
Können Sie bitte schauen Sie in meinen code, und ermitteln, warum change-Ereignis funktioniert nicht auf neu hinzugefügte element Geige

InformationsquelleAutor rink.attendant.6

Versuchen:

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

DEMO-FIDDLE

InformationsquelleAutor Unknown

Sollten Sie nicht fügen Sie die event-handler, bis Sie Hinzugefügt haben, die DOM-Knoten:

$(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');
    })
  });
});

Mit Fiedel:
http://jsfiddle.net/cjcLU/

InformationsquelleAutor urban_raccoons

dies ist, wie ich es Tat

$(document).on('change', "body", function(){
            $( ".ui-selectmenu" ).selectmenu();
        });

InformationsquelleAutor Wasim A.

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.