jquery 文件浏览添加和删除但不能从其他输入标签中获取文件，除了 first

如何解决jquery 文件浏览添加和删除但不能从其他输入标签中获取文件，除了 first

我想应用一个逻辑，我可以从中使用为新添加的元素提供新生成的类。

我希望每当我点击 Add Another 时，它都会添加新的文件浏览，我可以从中选择不同的图像。第一个图像应该始终是主要的，其他的将是次要的。当我点击删除链接时，相应的文件浏览和下拉菜单应该被删除。

$(document).ready(function(){

    $(".browse").click(function(){
        $(".myfile").click(); 
    });

    $(".myfile").on('change',function() { 
        $(".path").val(this.files[0].name); 
    });

    $(".add").click(function(){
        $("form").append("<div>"+$("form div:first-child").html()+"<br>"+"</div>"); 
    });

    $(".remove").click(function(){
        $("form div:last-child").remove(); 
    });
});

.main{
    width: 100%;
}

.sub1{
    border: 2px solid #808080;
    padding-left: 10px;
}

.sub2{
    display: flex;
    border: 1px solid #808080;  
}


.child1{
    width: 20%;
    padding-left: 10px;
    border: 1px solid #808080;
}

.child2{
    width: 80%;
    padding: 10px;
    border: 1px solid #808080;
}

.add{
    cursor: pointer;
}

.upload1{
    display: none;
}

.browse{
    display: inline-block;
    width: 80px;
    height: 18px;
    background-color: #d3d3d3;
    color: #000;
    border: 1px solid black;
    border-radius: 2px;
    cursor: pointer;
}

.browsebut{
    margin-left: 16px;
}

.myf{
    position: absolute;     
}




/* position: absolute;
    opacity: 5;
    top: 74px;
    display: -webkit-Box; */

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>browse</title>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="main">
        <div class="sub1">
            <p>Property Image</p>
        </div>
        <div class="sub2">
            <div class="child1">
                <p>Property Image</p>
            </div>
            <div class="child2">

               
                    <form>
                        <div class="upload">
                            <input type="text" name="path" class="path" value="no file selected">

                            <div id="browse" class="browse"><span class="browsebut">browse</span></div>
                            <div class="myf"> 
                                <label for="myfile"></label>
                                <input type="file" class="myfile" name="myfile" accept="image/*" hidden >
                            </div>
                            <select id="img">
                                <option value="1">primary</option>
                                <option value="1">secondaryimg</option>
                            </select>

                            <a href="#" class="remove">Remove</a>
                        </div>        
                
                    </form>
                
                    
                
                <div class="add">
                    <p>Add Another</p>
                </div>
            </div>
        </div>    
    </div>[enter image description here][1]

    <script src="index.js"></script>
</body>
</html>

解决方法

对于您要实现的目标，需要使用 event delegates。当动态添加新元素时，由您的原始 jQuery 代码添加的处理程序只知道第一行的元素，这就是为什么在添加其他行后其他行元素似乎都不起作用的原因。

应用了一些更正：

对于 row 元素，我删除了所有 id 属性，因为这些属性在文档中必须是唯一的。
两个选择选项都有 value="1"，所以我将 secondaryimg 选项设置为 value="2"
删除了未使用的 label 标签。

其他：

将 placeholder 与第一个输入一起使用以显示 no file selected 文本。
请参阅 .add 处理程序以了解将 select 选项设置为 secondaryimg 的处理
remove 事件处理程序不允许删除主要（第一个元素）。（如果不需要，请随意消除包装 remove() 的条件）
具有相同 name 的重复元素是仅检索第一个条目的原因。现在将有一行或多行，path、myfile 和 select all 的 name 属性需要数组语法，以便无论何时提交，您可以轻松地迭代列表。 path 输入 name 属性更改为 name="path[]"。 myfile 输入 name 属性更改为 name="myfile[]"，并且 select 没有 name 属性，所以我使用了 name="imgOpt[]"，可以随意重命名。在提交时，path[0]、myfile[0] 和imgOpt[0] 的迭代都指向第一行。只需增加其他行的索引即可。
请参阅 jquery 代码注释以了解更新的处理方式。

试试下面的可运行示例。

$(document).ready(function(){
    // Browse button event delegate
    $('form').on('click','.browse',function(){
        // Fire click for myfile input on the SAME row
        $(this).next().find('input').click(); 
    });

    // Myfile change event delegate
    $('form').on('change','.myfile',function() {
        // Copy the image to the path input on the SAME row.
        $(this).parent().siblings().first().val(this.files[0].name); 
    });

    $(".add").click(function(){
        $("form").append("<div>"+$("form div:first-child").html()+"<br>"+"</div>");
         // Set the added select to the 2nd (secondaryimg) option.
        $('select').last().val(2);
    });

    // Anchor tag event delegate
    $("form").on('click','a.remove',function() {
        if (!$(this).is($('a')[0])) { // Don't remove the first primary anchor tag?
            $(this).parent().remove();
        }
    });
});

.main{
    width: 100%;
}

.sub1{
    border: 2px solid #808080;
    padding-left: 10px;
}

.sub2{
    display: flex;
    border: 1px solid #808080;  
}


.child1{
    width: 20%;
    padding-left: 10px;
    border: 1px solid #808080;
}

.child2{
    width: 80%;
    padding: 10px;
    border: 1px solid #808080;
}

.add{
    cursor: pointer;
}

.upload1{
    display: none;
}

.browse{
    display: inline-block;
    width: 80px;
    height: 18px;
    background-color: #d3d3d3;
    color: #000;
    border: 1px solid black;
    border-radius: 2px;
    cursor: pointer;
}

.browsebut{
    margin-left: 16px;
}

.myf{
    position: absolute;     
}

/* position: absolute;
    opacity: 5;
    top: 74px;
    display: -webkit-box; */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Browse</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="main">
        <div class="sub1">
            <p>Property Image</p>
        </div>
        <div class="sub2">
            <div class="child1">
                <p>Property Image</p>
            </div>
            <div class="child2">
                <form>
                    <div class="upload">
                        <input type="text" name="path[]" class="path" 
                               placeholder="no file selected" value="">

                        <div class="browse">
                            <span class="browsebut">Browse</span>
                        </div>
                        <div class="myf"> 
                            <input type="file" class="myfile" 
                                   name="myfile[]" accept="image/*" hidden>
                        </div>
                        <select name="imgOpt[]">
                            <option value="1">primary</option>
                            <option value="2">secondaryimg</option>
                        </select>
                        <a href="#" class="remove">Remove</a>
                    </div>        
                </form>
                <div class="add">
                    <p>Add Another</p>
                </div>
            </div>
        </div>    
    </div>

    <script src="index.js"></script>
</body>
</html>