jquery创建选择，并触发更改

我似乎无法得到这个工作。我正在使用jquery创建一个html选择，并且我希望一些代码在其值发生更改时执行。jquery创建选择，并触发更改

代码如下：

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

我在做什么错？

来源

2011-08-19 jeremy

在这种情况下，select会在稍后创建，通过执行其他jQuery代码。我的例子在这里被简化了。 – jeremy

但是你知道，当你创造它时，不是吗？元素不会被添加为某些库的神秘结果。然后绑定事件处理程序。 '.live'和'.delegate'是专用功能，仅在非常特殊的情况下使用。在写jQuery的四年中，我从不需要它们。 – Malvolio

此外，'html [html.length] = x'完全合法的Javascript，但'html.push（x）'更具惯用性。 – Malvolio

您需要使用.delegate()（或.live()），因为您正在动态添加选择。当您使用.change()附加onChange处理程序时，它仅附加到现有的匹配元素，而不是稍后添加的元素。要将事件附加到所有匹配的元素，包括那些添加到以后的页面，你可以使用.delegate()功能，像这样：

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

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

来源

2011-08-19 19:27:36

你做*不*需要使用绑定！ – Malvolio

从技术上讲，你是对的 - 在添加'select'后添加事件处理程序也可以。但是，我想如果他以后不打算改变'select'，他只会硬编码HTML而不是动态生成它。使用'.live（）'给他这个选项。 –

他应该使用代表，因为不建议住在现场 – secretformula

您的动态添加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>') 

    });

DEMO

jquery live

来源

2011-08-19 19:27:46 Rafay

包含此：

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

     alert ("Wedding select change triggered!"); 

     //var wedturn = $('#weddingturnselectid').val(); 

     //$('#div3').append('<br>Wedding turn selected, ' + wedturn + '</br>') 

    });

在$(document).ready

，并改变它使用live

来源

2011-08-19 19:27:57 qwertymk

你需要使用live绑定，因为它被加载后的DOM负荷：

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

});

而且，我会把它放在$(document).ready的范围内，最好在加载它的代码之后（只是为了逻辑线性。）

来源

2011-08-19 19:28:32

在创建元素之前，您正在连接事件处理程序。

（你可以使用.live（）或者你可以互换操作的顺序）

来源

2011-08-19 19:29:02

-1

您在选择不存在设置change功能。

来源

2011-08-19 19:29:44 Malvolio

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

绑定在创建元素之后事件（最简单和推荐的选项）
使用.delegate()（或.live()）告诉jQuery来绑定事件，以选择匹配的任何元素每当它被添加到DOM。如果您选择此选项，如果您使用的是最新版本的jQuery > 1.4.2，则delegate()是首选方法，因为它的性能高于live()。

来源

2011-08-19 19:30:40 andyb

咦？ “.delegate”如何比“移动该死的代码”更“高性能”？ – Malvolio

@Malvolio啊，那部分应该是第二个选项的一部分。更正传入 – andyb

我明白了。是的，'.delegate'比'.live'好，但只是将代码移到正确的位置更好。 – Malvolio

jquery创建选择，并触发更改

回答

相关问题