页面读取js时的优先级

在页面读取js时，要创建点击事件的时候，无法点击，仔细了解之后才发现问题的原因：下面是起初的源码（只是演示）

var loginDiv = '<div id="style-loginDiv"><div id="login-DivButton"><h3 class="demoFont">登 陆</h3></div>';
loginDiv += '<h3 class="demo">用户登陆</h3>';
loginDiv += '<ul class="color-list">';
loginDiv += '<li><h3 class="loginFont">手机号：</h3><input type="text" id="userName" /></li>';
loginDiv += '<li><h3 class="loginFont">密码：</h3><input type="password" id="password" /></li>';
loginDiv += '<li><input class="Divbutton" type="button" value="登 陆" /></li>';
loginDiv += '<li><input class="Divbutton1" type="reset" value="注 册"  /></li>';
loginDiv += '</ul>';
loginDiv += '</div>';

//在这里创建了click事件，但是在前台页面按钮上是无法触发事件的，

//因为我们会发现在后面的$('body').append(loginDiv);没有执行时候，

//这个优先级的问题就会影响到click事件//的产生，所以针对这样的问题，

//我们就可以把这个事件放置在整个js加载完成以后去执行你想要的事件。

$('.Divbutton').click(function() {  

var userName = $("#userName").val();
var password = $("#password").val();
});
$('body').append(loginDiv);