Javascript 不适用于 ajax 生成的代码？

Question

我正在使用 jQuery form plugin上传文件。该插件使用隐藏的 iframe 来

在不刷新页面的情况下上传。一切正常，除了 javascript 不工作

生成的代码。这是我的代码:

    <form id="image_form" action="" method="post" enctype="multipart/form-data">
        <input type="file" id="image_file" name="image_file"><br>
        <input type="submit" value="upload">
    </form>
    <div id="avatar_wrapper">
    </div>

此表单将图像上传到服务器，服务器将返回一些处理过的图像。

<script type="text/javascript">
    $(document).ready(function() {
        var options = {
            success: showResponse,
            dataType: 'html'
        };
    $('#image_form').ajaxForm(options);

        $('.choose_avatar').hover(function() { /* Just for test */
            alert('hello');
        });
    });
    function showResponse(responseText, statusText, xhr, $form) {
        $('#avatar_wrapper').append(responseText);
    }
</script>

responseText 包含一些图片。

  <img src="http://localhost/avatar/0.jpg" class="choose_avatar" choice=0>
  <img src="http://localhost/avatar/1.jpg" class="choose_avatar" choice=1>
  <img src="http://localhost/avatar/2.jpg" class="choose_avatar" choice=2>

我写了这些代码来测试:

$('.choose_avatar').click(function() { /* Just for test */
    alert('hello');
});

奇怪的是，点击功能对这些生成的代码不起作用。有人可以帮我解决这个问题吗？谢谢。

Answer 1

您将不得不使用 live()，或者手动执行，在常量的父元素上放置一个 click 处理程序，并检查 事件。 target 以查看点击了哪个。

无论如何，这就是 live 的工作原理，所以坚持下去 :)

请注意，如果您使用的是较新的 jQuery，请使用 on() 而不是 live()。