小编典典

将HTML插入带有Ajax的页面后,选择dom元素

ajax

我创建了一个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元素,但是我不能。我有以下代码:

<a href="javascript:;" class="light-button">Next</a>
<select id="chapters-select">
    <?php foreach ($chapters as $chapter) : ?>
    <option value="<?php echo $chapter->id; ?>"><?php echo $chapter->title; ?></option>
    <?php endforeach; ?>
</select>

在这里,我动态生成选择选项。当我尝试这样做时:

$('#chapters-select').change(function(){
    alert('changed');
});

它不起作用。通过ajax附加html后,如何使用javascript?


阅读 171

收藏
2020-07-26

共1个答案

小编典典

使用on1.7版以上的委托事件

$('body').on('change', '#chapters-select', function(){
    alert('changed');
});

为了提高性能,body您应该编写最接近的static(未使用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 docs:

提供选择器后,事件处理程序称为“委托”。当事件直接发生在绑定元素上时,不调用处理程序,而仅对与选择器匹配的后代(内部元素)进行调用。jQuery使事件从事件目标一直冒泡到附加了处理程序的元素(即,最内层元素到最外层元素),并沿该路径运行与选择器匹配的任何元素的处理程序。

事件处理程序仅绑定到当前选定的元素。在您的代码调用.on()时,它们必须存在于页面上。为确保元素存在并可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。如果将新的HTML注入页面,请在将新的HTML放入页面后选择元素并附加事件处理程序。或者,使用委托事件来附加事件处理程序,如下所述。

2020-07-26