在使用ajax的页面中插入html后选择dom元素
我创建了一个ajax选项卡导航,其中html被插入到页面中。 代码看起来像这样:
$.ajax({ type: 'POST', url: 'main/ajaxjson/load_course_details', data: {page : which, course_id: id}, success: function(home){ $('#ajax-content ').hide(); $('#ajax-content').empty().append(home); $('#ajax-content').fadeIn(); } });
好的…所以我将我的标记附加到我的HTML中。 现在我需要从插入的html中选择dom元素,但我不能。 我有以下代码:
Next <option value="id; ?>">title; ?>
在这里,我动态生成选择选项。 当我尝试这样做时:
$('#chapters-select').change(function(){ alert('changed'); });
它不起作用。 我通过ajax追加html后如何使用javascript?
对于版本1.7+使用委托事件,例如on
$('body').on('change', '#chapters-select', function(){ alert('changed'); });
要提高性能而不是body
您应该编写最接近的静态(未添加动态与ajax或javascript)元素,其中包含“ chapters-select
如果您使用的是旧版本的jQuery
,请使用下表选择适当的方法:
$(selector).live(events, data, handler); // jQuery 1.3+ $(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(document).on(events, selector, data, handler); // jQuery 1.7+
on
文档上:
提供选择器时,事件处理程序称为委托。 当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素)。 jQuery将事件从事件目标起泡到附加处理程序的元素(即最里面到最外层的元素),并为匹配选择器的路径上的任何元素运行处理程序。
事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on()时页面上。 要确保元素存在且可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。 如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序。 或者,使用委托事件来附加事件处理程序,如下所述。
在页面首次加载后运行一次。
$("body").delegate('#chapters-select','change', function(){ alert('changed'); });
它等同于@ gdoron的答案,但与早于1.7的jQuery版本兼容