jquery ajax 帮助

Question

我目前正在使用一些 ajax，成功的 ajax 结果是一些更多的内容被动态添加到页面中。我的问题是动态添加的，看起来我无法将任何事件附加到添加的元素。

发生的流程是用户从下拉列表中选择一个选项，该选择的值被发送到一个 php 函数，然后该函数返回一些更多的 HTML 到页面，该页面附加到页面上的一个 div。

我知道 domReady 上不存在的元素存在问题，因为我运行 length() 检查并确认它们在页面上不“存在”。

是否可以解决这个问题，以便我可以在第一个 ajax 请求成功返回后添加的 HTML 上运行 click 事件。

$(document).ready(function() {

//customise the select menus
$('#customselector').SelectCustomizer();;

$('.career_select .selectitems').click(function(){
    var selectedCareer = $(this).attr('title');
    $.ajax({
        type: 'POST',
        url: '/roadmap/step_two',
        data: 'career_choice='+selectedCareer+"&ajax=true&submit_career=Next",
        success: function(html){
            $('.hfeed').append(html);
            $('#grade_choice').SelectCustomizer();
          }
    });
});

$('#grade_choice_options .selectitems').click(function(){
    var selectedGrade = $('#grade_choice_customselect').val();
    alert(selectedGrade);
})

});

Answer 1

直接使用live()而不是click()：

$('.career_select .selectitems').live('click', function() { ....

live() 本质上连接了随后添加的任何匹配的新元素。

Answer 2

尝试使用这个插件：

http://brandonaaron.net/code/livequery/docs : Live Query 通过绑定事件或自动触发匹配元素的回调来利用 jQuery 选择器的强大功能，即使在页面已加载且 DOM 更新后也是如此。