ajax加载的元素无法绑定事件问题解决

问题

点击搜索查询，显示前10条查询结果和一个”下一页“按钮，然后点击下一页按钮显示下一页结果和下一页按钮…遇到的问题是，点击下一页按钮没有按照js里面写的方法去访问链接，后来发现问题是没有绑定上ajax写的post方法。
代码：

$('#searchForm').submit(function() {
        //ajax 提交表单
        var $this = $(this);
        $.post('search/',
            $this.serialize(),
            function(data) {
                if(data['status']) {
                    var htmlstr='<div class="alert alert-info" role="alert"><h3>搜索结果(前十条)</h3></br>';
                    for(var book in data['info']){
                        htmlstr += '编号: ' + data['info'][book]['BookNum'] + '</br>' + '书名: ' + data['info'][book]['BookName'] + '</br>' + '借阅情况: ' + data['info'][book]['Condition'] + '</br>' + '<img class="media-object" src="' + data['info'][book]['BookCover'] + '"></br></br>';
                    }
                    htmlstr += '</div>';
                    if(data['next_page_link']){
                        htmlstr += '<form id="nextpageForm" method="POST"><input type="hidden" name="next_page_link" value="' + data['next_page_link'] + '"><button class="form-group btn btn-default" type="submit">下一页</button></form>';
                    }
                    $('#searchBox').html(htmlstr);     
                }else{
                    var htmlstr='<div class="alert alert-danger" role="alert">'+data['info']+'</div>';
                    $('#searchBox').html(htmlstr);
                }
            });
        return false;       //阻止表单提交
    });
$('#nextpageForm').submit(function(){
    var $this = $(this);
    $.post('nextpage/',
        $this.serialize(),
        function(data){
            if(data['status']) {
                var htmlstr='<div class="alert alert-info" role="alert"></br>';
                $('#nextpageForm').remove();
                for(var book in data['info']){
                    htmlstr += '编号: ' + data['info'][book]['BookNum'] + '</br>' + '书名: ' + data['info'][book]['BookName'] + '</br>' + '借阅情况: ' + data['info'][book]['Condition'] + '</br>' + '<img class="media-object" src="' + data['info'][book]['BookCover'] + '"></br></br>';
                }
                htmlstr += '</div>';
                if(data['next_page_link']){
                    htmlstr += '<form class="nextpageForm" method="POST"><input type="hidden" name="next_page_link" value="' + data['next_page_link'] + '"><button class="btn btn-default">下一页</button></form>';
                }
                $('#searchBox').append(htmlstr);
            }else{
                var htmlstr='<div class="alert alert-danger" role="alert">'+data['info']+'</div>';
                $('#searchBox').html(htmlstr);
            }
        });
    return false;       //阻止表单提交
});

这里是根据上一次查询数据有没有next_page_link参数决定会不会出现下一页的按钮，然后post这个链接给后台处理再循环。

解决

百度了一下，通过js后来加载出来的元素，无法实现事先写好的绑定，所以在这里我采用的解决办法是，把next_page_link需要实现的方法写成函数，在nextpageForm加载出来之后绑定上去。

var next_page = function(){
    var $this = $(this);
    $.post('nextpage/',
        $this.serialize(),
        function(data){
            if(data['status']) {
                var htmlstr='<div class="alert alert-info" role="alert"></br>';
                $('.nextpageForm').remove();
                for(var book in data['info']){
                    htmlstr += '编号: ' + data['info'][book]['BookNum'] + '</br>' + '书名: ' + data['info'][book]['BookName'] + '</br>' + '借阅情况: ' + data['info'][book]['Condition'] + '</br>' + '<img class="media-object" src="' + data['info'][book]['BookCover'] + '"></br></br>';
                }
                htmlstr += '</div>';
                if(data['next_page_link']){
                    htmlstr += '<form class="nextpageForm" method="POST"><input type="hidden" name="next_page_link" value="' + data['next_page_link'] + '"><button class="btn btn-default">下一页</button></form>';
                }
                $('#searchBox').append(htmlstr);
                $('.nextpageForm').bind('submit',next_page);
            }else{
                var htmlstr='<div class="alert alert-danger" role="alert">'+data['info']+'</div>';
                $('#searchBox').html(htmlstr);
            }
        });
    return false;       //阻止表单提交
}

searchFrom的方法里也加上一句

$('.nextpageForm').bind('submit',next_page);

解决