Jquery创建了select，并在更改时触发

jquery created select, and triggering on change

本文关键字：创建 select Jquery      更新时间：2023-09-26

我似乎不能让这个工作。我正在使用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>

我做错了什么?

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

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

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

Include this:

 $('#weddingturn').live('change', function() {
        alert ("Wedding select change triggered!");
        //var wedturn = $('#weddingturnselectid').val();
        //$('#div3').append('<br>Wedding turn selected, ' + wedturn + '</br>')
    });

在你的$(document).ready

改成live

当绑定.change()事件时，该元素还不存在。你有两个选择:

  1. 创建元素后绑定事件(最简单和推荐的选项)
  2. 使用.delegate()(或.live())告诉jQuery将事件绑定到任何匹配选择器的元素，无论何时它被添加到DOM。如果你选择这个选项，delegate()是首选的方法，如果你使用的是最新版本的jQuery > 1.4.2，因为它比live()性能更好。

您需要使用live绑定，因为它是在dom加载后加载的:

$("#weddingturn").live("change", function() {
});

另外，我将把它放在$(document).ready的范围内，最好是在加载它的代码之后(只是为了逻辑线性的缘故)

在创建元素之前就连接了事件处理程序。

(你可以使用。live()或者你可以交换操作顺序)

你是动态添加的select到DOM，在你的事件处理程序的声明的时候，select不存在，所以事件处理程序不绑定到元素使用.live事件处理程序附加到动态添加的元素

$('#weddingturn').live('change',function() {
        alert ("Wedding select change triggered!");
        //var wedturn = $('#weddingturnselectid').val();
        //$('#div3').append('<br>Wedding turn selected, ' + wedturn + '</br>')
    });

jquery live

您正在为一个尚不存在的选择设置change函数。将.change调用移动到.append

之后
相关文章：