jQuery创建选择，并在更改时触发 [英] jquery created select, and triggering on change

问题描述

我似乎无法使它正常工作.我正在使用jquery创建一个html select，并且我希望在其值更改时执行一些代码.

I cannot seem to get this to work. I am using jquery to create an html select, and I want some code to execute when its value changes.

代码如下:

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

我在做什么错了?

推荐答案

您需要使用 .delegate() (或 .live() )，因为您是动态添加选择的.当您将onChange处理程序与.change()附加在一起时，它仅附加到<​​strong>现有匹配元素上，而不附加到以后添加的元素上.要将事件附加到所有匹配元素(包括以后添加到页面的元素)中，请使用.delegate()函数，如下所示:

You need to use .delegate() (or .live()) since you are adding the select dynamically. When you attach an onChange handler with .change() it is only attached to existing matching elements, not elements which are added later on. To attach an event to all matching elements including those added to the page later, you use the .delegate() function, like this:

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

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

However, as some people point out, you can merely attach the event handler immediately after adding the <select> to the DOM. That way, you can still use .change() and your code should run faster.

这篇关于jQuery创建选择，并在更改时触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！