[英]jquery created select, and triggering on change
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.
我正在使用jquery创建html select,并且我希望在其值更改时执行一些代码。
code follows: 代码如下:
<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>
What am I doing wrong? 我究竟做错了什么?
You need to use .delegate()
(or .live()
) since you are adding the select dynamically. 由于要动态添加选择,因此需要使用
.delegate()
(或.live()
)。 When you attach an onChange handler with .change()
it is only attached to existing matching elements, not elements which are added later on. 当使用
.change()
附加onChange处理程序时,它仅附加到现有的匹配元素上,而不附加到以后添加的元素上。 To attach an event to all matching elements including those added to the page later, you use the .delegate()
function, like this: 要将事件附加到所有匹配元素(包括稍后添加到页面的元素)中,请使用
.delegate()
函数,如下所示:
$('body').delegate('#weddingturn','change', function(){
alert('Wedding select changed to ' + $(this).find('option:selected').val() );
});
However, as some people point out, you can merely attach the event handler immediately after adding the <select>
to the DOM. 但是,正如某些人指出的那样,您只能在将
<select>
添加到DOM之后立即附加事件处理程序。 That way, you can still use .change()
and your code should run faster. 这样,您仍然可以使用
.change()
并且您的代码应运行得更快。
Include this: 包括以下内容:
$('#weddingturn').live('change', function() {
alert ("Wedding select change triggered!");
//var wedturn = $('#weddingturnselectid').val();
//$('#div3').append('<br>Wedding turn selected, ' + wedturn + '</br>')
});
in your $(document).ready
在您的
$(document).ready
And change it to use live
并将其更改为
live
使用
When the .change()
event is bound, the element does not exist yet. 绑定
.change()
事件时,该元素尚不存在。 You have 2 choices: 你有2个选择:
.delegate()
(or .live()
) to tell jQuery to bind the event to any element matching the selector whenever it is added to the DOM. .delegate()
(或.live()
)告诉jQuery每当将事件添加到DOM时将事件绑定到与选择器匹配的任何元素。 If you choose this option, delegate()
is the preferred method if you are using a recent version of jQuery > 1.4.2
since it is more performant than live()
. > 1.4.2
的最新版本时, delegate()
方法是首选方法,因为它比live()
性能更高。 your are dynamically adding the select
to the DOM, at the time of declaration of your event handler the select
doest not exists so the event handler doesn't get binded to the element use .live
to attach the event handler to dynamically added element 您正在将
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>')
});
You'll need to bind using live
, since it is loaded post-DOM load: 您需要使用
live
进行绑定,因为它是在DOM加载后加载的:
$("#weddingturn").live("change", function() {
});
Also, I would place this within scope of $(document).ready
, preferably after the code which loads it (just for the sake of logical linearity.) 另外,我会将其放置在
$(document).ready
范围内,最好放在加载它的代码之后(仅出于逻辑线性考虑)。
You're hooking up the event handler BEFORE you've created the element. 在创建元素之前,您需要连接事件处理程序。
(you can use .live() or you can just swap the order of operations) (您可以使用.live(),也可以只交换操作顺序)
You are setting the change
function on a select that does not yet exist. 您正在设置尚不存在的选择上的
change
功能。 Move that .change
call to after the .append
将
.change
呼叫移至.append
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.