Question

我试图调试并找到错误，为什么Change Event不在输入字段上工作。所以我在调试时把断点放在jquery的更改事件上，但它跳过了。我无法找到它为什么不在断点处停止调试。

这里只显示了动态生成的html部分。

var p = $('<input type="file" ID="flImage" name="flImage" runat="server" />');
                $("#mainTbl").append(p);

脚本

 <script type="text/javascript">      
            $(function () {
                var reader = new FileReader();
                var fileName;
                var contentType;
//tried all three trick to envoke change function but not work
                //$('input[name=flImage]').change(function () {
                $("<input type='file' name='flImage' ID='flImage'/>").change(function () {
                //$("input[name=flImage]").on("change", function(){
                    if (typeof (FileReader) != "undefined") {
                        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                        $($(this)[0].files).each(function () {
                            var file = $(this);
                            if (regex.test(file[0].name.toLowerCase())) {
                                fileName = file[0].name;
                                contentType = file[0].type;
                                reader.readAsDataURL(file[0]);
                            } else {
                                alert(file[0].name + " is not a valid image file.");
                                return false;
                            }
                        });
                    } else {
                        alert("This browser does not support HTML5 FileReader.");
                    }
                });    
</script>

在显示来自评论的许多建议后，我尝试这样来访问输入元素没问题:div.main main-raised > div#pdfFormInsideL1 > table#mainTbl > tbody >tr>'input[name=flImage] 以下的图片

Answer 1

＆＃13;

var p = $('<input type="file" ID="flImage" name="flImage" runat="server" />');
                $("#mainTbl").append(p); 
                
                
$(function () {
        var reader = new FileReader();
        var fileName;
        var contentType;

        $("input[name=flImage]").on("change", function(){
            if (typeof (FileReader) != "undefined") {
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                $($(this)[0].files).each(function () {
                    var file = $(this);
                    if (regex.test(file[0].name.toLowerCase())) {
                        fileName = file[0].name;
                        contentType = file[0].type;
                        reader.readAsDataURL(file[0]);
                    } else {
                        alert(file[0].name + " is not a valid image file.");
                        return false;
                    }
                });
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        });    
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mainTbl"></div>

＆＃13;

更改事件不在输入字段上工作

1 个答案: