[英]change event doesn't work on dynamically generated elements - Jquery
I generate a dropdownList dynamicly with jquery Ajax , generated dropdown's id is specificationAttribute
. 我使用jquery Ajax动态生成dropdownList,生成的dropdown的id是
specificationAttribute
。 I want create add event for new tag was generated ( specificationAttribute
) , to do this I created Belowe script
in window.load
: 我想为生成新标记创建add事件(
specificationAttribute
),为此我在window.load
创建了Belowe script
:
$(document).on('change', '#specificationattribute', function () {
alert("Clicked Me !");
});
but it does not work . 但它不起作用。 I try any way more like
click
, live
but I cant any result. 我尝试任何方式更像
click
, live
但我不能任何结果。
Code from fiddle: 来自小提琴的代码:
$(window).load(function () {
$("#specificationCategory").change(function () {
var selected = $(this).find(":selected");
if (selected.val().trim().length == 0) {
ShowMessage('please selecet ...', 'information');
}
else {
var categoryId = selected.val();
var url = $('#url').data('loadspecificationattributes');
$.ajax({
url: url,
data: { categoryId: categoryId, controlId: 'specificationattribute' },
type: 'POST',
success: function (data) {
$('#specificationattributes').html(data);
},
error: function (response) {
alert(response.error);
}
});
}
});
$(document).on('change', '#specificationAttribute', function () {
alert("changed ");
});
}
Your fiddle has syntax errors. 你的小提琴有语法错误。 Since a dropdownlist generates a select, let's use one.
由于下拉列表生成一个选择,让我们使用一个。
For my answer I used THIS HTML, more on this later: things did not match in your code 对于我的回答,我使用了这个HTML,稍后会对此进行更多说明:代码中的内容不匹配
<select id="specificationAttribute" name="specificationAttribute">
</select>
Code updated: (see inline comments, some are suggestions, some errors) 代码更新:(见内联评论,一些是建议,一些错误)
$(window).on('load', function() {
$("#specificationCategory").on('change',function() {
var selected = $(this).find(":selected");
// if there is a selection, this should have a length so use that
// old: if (selected.val().trim().length == 0) {
if (!selected.length) { // new
// NO clue what this is and not on the fiddle so commented it out
// ShowMessage('please selecet ...', 'information');
alert("select something a category");// lots of ways to do this
} else {
var categoryId = selected.val();
var url = $('#url').data('loadspecificationattributes');
$.ajax({
url: url,
data: {
categoryId: categoryId,
controlId: 'specificationattribute'
},
type: 'POST',
success: function(data) {
// THIS line id does not match my choice of specificationAttribute so I changed it
$('#specificationAttribute').html(data);
},
error: function(response) {
alert(response.error);
}
});
}
});
// THIS should work with the markup I put as an example
$(document).on('change', '#specificationAttribute', function() {
alert("changed ");
});
});// THIS line was missing parts
@Uthman, it might be the case that you have given different id to select and using wrong id in onchange event as i observed in the jsfiddle link https://jsfiddle.net/a65m11b3/4/ ` @Uthman,可能是你在onchange事件中选择和使用错误的id给出了不同的id,就像我在jsfiddle链接https://jsfiddle.net/a65m11b3/4/中观察到的那样。
success: function (data) {
$('#specificationattributes').html(data);
},and $(document).on('change', '#specificationAttribute', function () {
alert("changed ");
}); $(document).on('change', '#specificationAttribute', function () {
alert("changed ");
});.
It doesnt work because at the moment of attaching event your html element doesnt existi yet. 它不起作用,因为在附加事件的那一刻你的html元素还没有存在。
What you need are delegated events. 您需要的是委派活动。 Basically, you attach event to parent element + you have selector for child (usually by classname or tagname).
基本上,您将事件附加到父元素+您有子选择器(通常通过classname或标记名)。 That way event fires for existing but also for elements that meet selector added in future.
这样的事件会触发现有事件,也会触发将来添加的符合选择器的元素。
Check documentation here: https://api.jquery.com/on/#on-events-selector-data-handler 查看文档: https : //api.jquery.com/on/#on-events-selector-data-handler
Especially part with this example: 特别是这个例子的一部分:
$( "#dataTable tbody" ).on( "click", "tr",
function() {
console.log( $( this ).text() );
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.