Question

我有以下问题：

我想用JQuery onbuttonclick生成HTML元素，效果很好。

$(document).ready(function() {
$('#add_more').click(function() {
    $(this).before($("<div/>", {
        id: 'filediv'
    }).fadeIn('slow').append($("<input/>", {
        name: 'file[]',
        type: 'file',
        id: 'file'
    }), $("<br/><br/>")));
});

HTML看起来像这样：

<div id="maindiv">
<div id="formdiv">
    <form enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        First Field is Compulsory. Only JPEG,PNG,JPG Type Image Uploaded. Image Size Should Be Less Than 10MB.<br/><br/>
    <div id="filediv">
        <input name="imagetitle" type="text" class="imagetitle" placeholder="Choose image title" value=""><br>
        <input name="file[]" type="file" id="file"/><br><br>
    </div>
        <input type="button" id="add_more" class="upload" value="Add More Files"/>
        <input type="submit" value="Upload File" name="submit" id="upload" class="upload"/>
    </form>

    <?php include "upload.php"; ?>
</div>
</div>

因此生成的元素就像我希望它们生成一样。现在我希望在用户更改文本时更改HTML“value”属性，这也很有效。

$('.imagetitle').change(function(){
    var text = $(this).val();
    $(this).val(text);
    $(this).attr("value", text);
});

现在出现问题...如果我生成第二个HTML输入框并通过输入新文本来更改值，则不会更改。

这是第一个元素（更改值的工作原理）

这是第二个元素（不起作用）

有人可以向我解释这里发生了什么以及我的错误是什么吗？

非常感谢提前！

Answer 1

这里的问题是事件委托。这意味着jQuery在页面加载后无法绑定事件。

解决此问题的方法是使用on功能。例如：

$('.imagetitle').change(function(){
    var text = $(this).val();
    $(this).val(text);
    $(this).attr("value", text);
});

可以更改为：

$('.imagetitle').on('change', function(){
    var text = $(this).val();
    $(this).val(text);
    $(this).attr("value", text);
});

哪个应该允许jQuery将change事件绑定到适当的元素。

Answer 2

有几件事需要考虑，首先，如果你的html是在DOM准备好后通过java脚本生成的，你需要事件委托将事件与动态添加的元素绑定，如：

$("#formdiv").on("change",".imagetitle",function(){
    var text = $(this).val();
    $(this).val(text);
    $(this).attr("value", text);
});

另一件事是，不要渲染具有相同id的多个元素，它将是无效的html，而是可以使用类属性：

$(document).ready(function() {
$('#add_more').click(function() {
    $(this).before($("<div/>", {
        class: 'filediv' // use class attribute instead
    }).fadeIn('slow').append($("<input/>", {
        name: 'file[]',
        type: 'file',
        id: 'file'
    }), $("<br/><br/>")));
});

Answer 3

委派您的更改事件，您已动态添加元素，因此事件不会触发附加的事件，事件委托将点击事件形成静态元素body到动态添加的元素.imagetitle：

$('body').on('change','.imagetitle',function(){
    var text = $(this).val();
    $(this).val(text);
    $(this).attr("value", text);
});

从文件输入中删除id或将id更改为类

JQuery更改了多个生成的HTML元素的值attr

3 个答案: