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');
});

奇怪的是，click函数对这些生成的代码不起作用。有人可以帮帮我吗？谢谢。

Answer 1

您必须使用live()，或者手动执行，在父元素上放置一个click处理程序，并检查event.target以查看单击了哪一个。

这就是live在引擎盖下工作的方式，所以只需坚持下去：）

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

Answer 2

您必须对这些动态生成的元素使用.live。

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

Answer 3

在容器avatar_wrapper上，您必须绑定一个实时/委托侦听器：

$('#avatar_wrapper').delegate('.choose_avatar','click',function() {
    alert('hello');
});

希望它有所帮助！

Answer 4

当您执行$('.choose_avatar')时，您正在选择具有类choose_avatar的元素（尚不存在）并附加事件处理程序。如果动态加载元素，这显然不起作用。更正确的方法是在包装器div上处理委托事件，如此，

$('#avatar_wrapper').delegate('img.choose_avatar', 'click', function (e) {
    // do stuff
});

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

4 个答案: