将事件附加到动态呈现字段的更简洁的方法

Question

我将更改事件附加到动态呈现的表单字段，如下所示：

        var html ='';
        html += '<div class="Gallery-overlayContentWrapper">';
        html += '<center>';
        html += '<h3>'+self.data('uploadHeading')+'</h3>'
        html += parent;
        html += '<form id="Gallery-uploadForm" enctype="multipart/form-data" method="post">';
          html += '<input type="hidden" name="Gallery-Parent" id="Gallery-Parent" value="'+self.data('activeFolder')+'" />';
          html += '<p><input type="file" name="file1" id="file1"></p>';
          html += '<p><progress id="Gallery-uploadProgress" value="0" max="100"></progress></p>';
        html += '</form>';
        html += '</center>';
        html += '</div>';

        $(self).find(".Gallery-"+self.data('overlayType')).append(html);
        $(self).find(".Gallery-"+self.data('overlayType')).fadeIn(); //This only covers the thumbs area

        setTimeout(function(){
            $(self).find('#file1').change(function(){
                self.data('uploadFile')(self);
            });
        },1000);

这行得通，但是像这样依赖于 1 秒后呈现的元素感觉很老套，有更简洁的方法吗？

Answer 1

不用timeout，追加后马上附上

    $(self).find(".Gallery-"+self.data('overlayType')).append(html);
    $(self).find('#file1').change(function(){
            self.data('uploadFile')(self);
        });
    $(self).find(".Gallery-"+self.data('overlayType')).fadeIn();

或使用委托

$(document).on('change', '#file1', function(){
                self.data('uploadFile')(self);
            });

将事件附加到动态呈现字段的更简洁的方法

cleaner way to attach event to dynamically rendered field

html

javascript

jquery

timeout