我创建了一个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?

最佳答案

对于1.7+版本,使用on之类的委托(delegate)事件

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

为了提高性能而不是body,您应该编写包含“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:

关于javascript - 在将HTML插入带有Ajax的页面中后选择dom元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9466241/

10-12 01:32
查看更多