aFarkas / webshim

[DEPRECATED] Webshims Lib is a modular capability-based polyfill-loading library
http://aFarkas.github.com/webshim/demos/index.html
MIT License
1.42k stars 201 forks source link

change event not trigger after display none in IE9 #588

Closed a631807682 closed 5 years ago

a631807682 commented 7 years ago

I use webshim to preview image in IE9 ,i hide a DOM and then show it , but change event not trigger and mousedown/mouseup event work fine . here is my code :

<!doctype html>
<html>

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="bower_components/webshim-1.16.0/js-webshim/minified/polyfiller.js"></script>
    <title>Image preview example</title>
</head>
<style type="text/css">
.hide {
    display: none;
}

.show {
    display: block;
}
</style>

<body>
    <!-- add ws-filereader class to all shimable type="file" inputs -->
    <div>
        <input type="file" class="ws-filereader" id="user-photo" multiple="" accept="image/*" />
    </div>
    <img src="" id="preview" style="width: 100px;height:100px">
    <div class="hide" id='j-upload'>
        <button id='btnClose'>X</button>
        <div id="sec">
            <input type="file" class="ws-filereader" id="user-photo-1" multiple="" accept="image/*" />
        </div>
        <img src="" id="preview-1" style="width: 100px;height:100px">
    </div>
    <button id='btnDisplay'>show</button>
</body>

</html>
<script type="text/javascript">
//load the filereader
webshim.polyfill('filereader');

//on DOM ready filereader is shimmed
$(function() {
    $('#user-photo').on('change', function(evt) {
        console.log('change 0 ')
        var reader, file;
        reader = new FileReader();
        reader.onload = function(evt) {
            var fileData = evt.target.result;
            $('#preview').attr('src', fileData);
            // fileData is the base64 encoded image
        };

        file = $(this).prop('files')[0];
        reader.readAsDataURL(file);

        $('#j-upload').attr('class', 'show');
        // $('body').css('overflow', 'none')
    });

    $('#user-photo-1').on('change', function(evt) {
        console.log('change 1 ')
        var reader, file;
        reader = new FileReader();
        reader.onload = function(evt) {
            var fileData = evt.target.result;
            $('#preview-1').attr('src', fileData);
            // fileData is the base64 encoded image
        };

        file = $(this).prop('files')[0];
        reader.readAsDataURL(file);
        $('#j-upload').attr('class', 'hide');
        //$('#j-upload').hide();
        // $('#j-upload').css('visibility', 'hidden');
        // $('body').css('overflow', 'auto')
    });

    $('#btnDisplay').click(function() {
        $('#j-upload').attr('class', 'show');
        // $('#j-upload').show();
        // $('#j-upload').css('visibility', 'visible');
        // $('body').css('overflow', 'none')
    })

    $('#btnClose').click(function() {
        $('#j-upload').attr('class', 'hide');
        // $('#j-upload').css('visibility', 'hidden');
        // $('#j-upload').hide();
        // $('body').css('overflow', 'auto')
    })

});
</script>