javascript - jquery 创建选择，并在更改时触发

Question

我似乎无法让它工作。我正在使用 jquery 创建一个 html 选择，我希望在它的值发生变化时执行一些代码。

代码如下:

<script type ="text/javascript">

   var firstweddingturn = '400';

   $('#weddingturn').change(function() {

      alert ("Wedding select change triggered!");

      //var wedturn = $('#weddingturnselectid').val();
      //$('#div3').append('<br>Wedding turn selected, ' + wedturn + '</br>')

    });


    $(document).ready(function() {

      var html = [];
      html[html.length] = '<select name="weddingturn" id="weddingturn">';
      var a = firstweddingturn;
      var b = Number(firstweddingturn) + 16;
      while (a < b) {
        // do some code
        html[html.length] = '<option name="asdf" value = "1">' + a + '</option>';
        a++;
      }  // end while
      html[html.length] = '</select>';
      $('#div1').append(html.join('')); 

    });
</script>

我做错了什么？

Answer 1

您需要使用 .delegate() (或 .live() )因为您正在动态添加选择。当您使用 .change() 附加 onChange 处理程序时它仅附加到<​​strong>现有 匹配元素，而不是以后添加的元素。要将事件附加到所有匹配元素，包括后来添加到页面的元素，您可以使用 .delegate()函数，像这样:

$('body').delegate('#weddingturn','change', function(){
  alert('Wedding select changed to ' + $(this).find('option:selected').val() );
});

但是，正如一些人指出的那样，您只需在添加 <select> 之后立即附加事件处理程序即可。到 DOM。这样，您仍然可以使用 .change()并且您的代码应该运行得更快。