javascript - 当前页面上的 ajax 调用后 jQuery 不触发

Question

我的网站是基于 PHP 构建的。我有一个“注册”页面，用于验证用户名是否已被使用。参见下面的代码:

$('#signup_form').find('#username').blur(function() {
    $ajax({
           url: '/login/check_username',
      type: "POST",
      data: form_data,
           success: function(result) { 
                if (result) {
                $('#username').after('<div id="bad_username"
                               style="color:red;">' +
                             '<p>username taken</p></div>');
                }
            }
     });

当我加载我的页面 site.com/signup 时，上述效果很好

自然地，它起作用了，因为 jQuery 能够找到“用户名”字段并对模糊采取操作(我可以通过查看 html 源代码来验证)。

现在，如果“用户名”字段未在 html 中呈现怎么办？当我在 ajax 页面加载上加载注册页面时会发生这种情况，在这种情况下，浏览器根本不知道“用户名”字段，即使它以视觉方式显示它。

总结快乐之路 ->

我加载 -> site.com/signup我查看源代码 -> id 为“username”的字段可见如果用户名已存在，则模糊事件触发并显示消息。

总结问题 ->

** 1 ** 我访问 -> site.com/some_page在此页面中，我单击 site.com/signup

** 2 ** 现在 some_page 的内容已通过 ajax 替换，我看到了我的“注册”表单字段。

** 3 ** 查看源代码 -> 我以前在快乐路径场景中看到的“用户名”现在不再出现在 html 源代码中；

** 4 ** 也许是由于“用户名”不在 html 源代码中，现在当我模糊用户名时什么也没有发生。不会调用 jQuery，并且不会检查现有用户名。

是否有一个特殊的函数告诉 jQuery“查找”或“加载”“用户名”字段？

请帮忙!谢谢。

Answer 1

根据您的情况，您需要更改:

$('#signup_form').find('#username').blur(function() {

至:

$('body').on('blur', '#username', function() {
                      ^^^^^^^^^ the element you want to register the event of
   ^^^^ any containing element that already exists on page load