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

I'm using jQuery form plugin to upload files. The plugin uses a hidden iframe to

我正在使用jQuery表单插件上传文件。该插件使用隐藏的iframe

upload without refreshing the page. Everything works fine except javascript doesn't work on

上传而不刷新页面。一切正常,除了javascript无法正常工作

generated code. Here's my code:

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

    <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>

This form uploads an image to server and server will return some processed images.

此表单将图像上载到服务器,服务器将返回一些已处理的图像。

<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 contains some images.

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>

I wrote these code to test:

我写了这些代码来测试:

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

It's strange that click function doesn't work on these generated code. Can someone please help me with this?Thanks.

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

4 个解决方案

#1

You will have to use live(), or do it manually, place a click handler on the parent element that is constant, and check event.target to see which one was clicked.

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

This is how live works under the hood, anyway, so just stick with it :)

无论如何,这就是现场工作的方式,所以坚持下去:)

Note that if you're using a newer jQuery, then use on() instead of live().

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

#2

You will have to use .live on these dynamically generated elements.

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

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

#3

On the container avatar_wrapper you must bind a live/delegate listener :

在容器avatar_wrapper上,您必须绑定一个live / delegate侦听器:

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

Hope it helps!

希望能帮助到你!

#4

When you do a $('.choose_avatar'), you are selecting elements with class choose_avatar (which don't exist yet) and attaching the event handler. Which obviously won't work if the elements are loaded dynamically. A more correct approach is to handle the delegated event on the wrapper div like so,

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

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

#1