jQuery的上变化不触发动态内容 [英] Jquery on change not firing for dynamic content
问题描述
我试图创建一个级联下拉的所有动态元素。
我的HTML：
＆LT;选择一个id =网站NAME =SelectedSiteId＆GT;＆LT;期权价值=＆GT;＆LT; /选项＆GT;＆LT; /选择＆GT;
＆LT;选择一个id =部门NAME =SelectedSectorId＆GT;＆LT;期权价值=＆GT;＆LT; /选项＆GT;＆LT; /选择＆GT;
我有2个功能加载的元素使用AJAX，无论是做工精细：
函数GetSites（）{
$阿贾克斯（{
网址：/网站/ GetSites'，
数据类型：JSON，
键入：POST，
错误：函数（）{
警报（时出错。）;
}，
成功：功能（数据）{
VAR项目=;
$每个（数据，功能（I，项目）{
项目+ =＆LT;期权价值= \+ item.Value +\＆gt;中+ item.Text +＆LT; /选项＆gt;中;
}）;
$（＃网站）HTML（项目）。
}
}）;
}
功能GetSectors（SITEID）{
$阿贾克斯（{
网址：/网站/ GetSectors'，
数据：{SITEID：SITEID}，
数据类型：JSON，
键入：POST，
错误：函数（）{
警报（时出错。）;
}，
成功：功能（数据）{
VAR项目=;
$每个（数据，功能（I，项目）{
项目+ =＆LT;期权价值= \+ item.Value +\＆gt;中+ item.Text +＆LT; /选项＆gt;中;
}）;
$（＃部门）HTML（项目）。
}
}）;
}
我需要调用的基础上的选址GetSectors。我有这样的：
$（文件）。就绪（函数（）{
$（＃网站）。在（变，功能（五）{
VAR SITEID = $（＃网站）VAL（）。
GetSectors（SITEID）;
}）;
GetSites（）;
}）;
不过，这是行不通的。我使用jQuery 1.8.3。
任何想法问题出在哪里？
感谢您！
尝试事件代表团
$（文件）。在（变，#Sites，函数（）{
VAR SITEID = THIS.VALUE;
GetSectors（SITEID）;
}）;
事件的冒泡行为，使我们能够做事件委派 - 绑定处理程序，以高层次的元素，然后检测其中 低层次的元素发起的活动。
事件代表团有两个主要的优点。 第一，它可以让我们的绑定 较少的事件处理程序比我们不得不如果我们听绑定 点击单个元素，它可以是一个大的性能提升。 二，它可以让我们的绑定到父元素 - 如无序 列表 - 而且知道我们的事件处理程序的火象预期即使 该父元素的内容发生变化。
来自 http://jqfundamentals.com/chapter/events
委派事件有的优势，他们可以处理事件 被添加到文档在稍后的时间派生元素。通过 采摘是保证将present当时的元素的 委派的事件处理程序连接，可以使用委派事件 避免了需要频繁安装和取下事件处理程序。：此 元件可以是鉴于一个容器元素 模型 - 视图 - 控制器设计，例如，文件或如果事件 处理程序要监视文档中的所有事件冒泡。该 文档元素是在文档的前头部可用 加载任何其他HTML，因此它是安全的，没有附加的事件没有 等待文件准备就绪。
I'm trying to create a cascade dropdown with all dynamic elements.
My 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:
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:
$(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.
Any Idea where is the problem?
Thank you!
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 handlers than 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
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.
Taken from: http://api.jquery.com/on/
这篇关于jQuery的上变化不触发动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
