Jquery on change 不为动态内容触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14346954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery on change not firing for dynamic content
提问by estebane97
I'm trying to create a cascade dropdown with all dynamic elements.
我正在尝试创建一个包含所有动态元素的级联下拉列表。
My Html:
我的HTML：
<select id="Sites" name="SelectedSiteId"><option value=""></option></select>
<select id="Sectors" name="SelectedSectorId"><option value=""></option></select>
I have 2 functions to load elements using ajax, both working fine:
我有 2 个使用 ajax 加载元素的函数，两者都工作正常：
function GetSites() {
$.ajax({
url: '/Sites/GetSites',
dataType: "json",
type: "POST",
error: function () {
alert("An error ocurred.");
},
success: function (data) {
var items = "";
$.each(data, function (i, item) {
items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
});
$("#Sites").html(items);
}
});
}
function GetSectors(siteId) {
$.ajax({
url: '/Sites/GetSectors',
data: { siteId: siteId },
dataType: "json",
type: "POST",
error: function () {
alert("An error ocurred.");
},
success: function (data) {
var items = "";
$.each(data, function (i, item) {
items += "<option value=\"" + item.Value + "\">" + item.Text + "</option>";
});
$("#Sectors").html(items);
}
});
}
I need to call GetSectors based on the Site selection. I have this:
我需要根据站点选择调用 GetSectors。我有这个：
$(document).ready(function () {
$("#Sites").on("change", function (e) {
var siteId = $("#Sites").val();
GetSectors(siteId);
});
GetSites();
});
But it doesn't work. I'm using jquery 1.8.3.
但它不起作用。我正在使用 jquery 1.8.3。
Any Idea where is the problem?
任何想法问题出在哪里？
Thank you!
谢谢！
回答by Chase
Try Event Delegation:
尝试事件委托：
$(document).on("change", "#Sites", function(){
var siteId = this.value;
GetSectors(siteId);
});
The bubbling behavior of events allows us to do "event delegation" — binding handlers to high-level elements, and then detecting which low-level element initiated the event.
Event delegation has two main benefits. First, it allows us to bind fewer event handlersthan we'd have to bind if we were listening to clicks on individual elements, which can be a big performance gain. Second, it allows us to bind to parent elements— such as an unordered list — and know that our event handlers will fire as expected even if the contents of that parent element change.
事件的冒泡行为允许我们进行“事件委托”—— 将处理程序绑定到高级元素，然后检测哪个低级元素发起了事件。
事件委托有两个主要好处。首先，它允许我们绑定的事件处理程序比我们在监听单个元素上的点击时必须绑定的事件处理程序少，这可以极大地提高性能。 其次，它允许我们绑定到父元素——比如一个无序列表——并且知道即使该父元素的内容发生变化，我们的事件处理程序也会按预期触发。
Taken from: http://jqfundamentals.com/chapter/events
摘自：http: //jqfundamentals.com/chapter/events
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.
委托事件的优点是它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。例如，如果事件处理程序想要监视文档中的所有冒泡事件，则此元素可以是模型-视图-控制器设计中视图的容器元素。在加载任何其他 HTML 之前，文档元素在文档的头部可用，因此可以安全地在那里附加事件，而无需等待文档准备就绪。
Taken from: http://api.jquery.com/on/
回答by Marci Banez
I had the same problem on binding change function for dynamically added content. I solved it using this. Hope it helps someone ^^
我在动态添加内容的绑定更改功能上遇到了同样的问题。我用这个解决了它。希望对某人有帮助^^
$(".select_class").live("change", function(){
console.log("testing...");
});
