Question

我尝试在更改文件输入后添加div

我的HTML代码

<div class="form-group product-color">
    <div>
        <label>Color:</label>
        <input type="text" placeholder="Color name"/>
    </div>

    <div>
        <label>Size:</label>
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off" checked> S
          </label>
          <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off"> M
          </label>
          <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off"> L
          </label>
            <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off"> XL
          </label>
            <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off"> XXL
          </label>
        </div>
    </div>

    <div>
        <label>Color Image:</label>
        <input type="file" class="input-lg product-img" multiple=""/>
    </div>
</div>

我的jQuery代码是

$(".product-color").on('change', 'input[type=file]', function () {
    var  test = $(this).closest('.product-color').clone();
    $(this).closest('.product-color').after(test);
});

但问题是.on（）方法看不到新元素，而.after（）函数只应用于第一个div。

我该如何解决这个问题？

Answer 1

尝试将test调整为$(this).closest('.product-color');;将true作为参数添加到.clone()，以便在克隆的change元素中保留附加的".product-color"事件;在下一行拨打test.after(test.clone(true));

＆＃13;

$(".product-color").on('change', 'input[type=file]', function () {
    var  test = $(this).closest('.product-color');
    test.after(test.clone(true));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group product-color">
    <div>
        <label>Color:</label>
        <input type="text" placeholder="Color name"/>
    </div>

    <div>
        <label>Size:</label>
        <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off" checked> S
          </label>
          <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off"> M
          </label>
          <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off"> L
          </label>
            <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off"> XL
          </label>
            <label class="btn btn-primary">
            <input type="checkbox" autocomplete="off"> XXL
          </label>
        </div>
    </div>

    <div>
        <label>Color Image:</label>
        <input type="file" class="input-lg product-img" multiple=""/>
    </div>
</div>

＆＃13;

Answer 2

您需要将事件绑定到document元素而不是.product-color元素。

$(document).on('change', '.product-color input[type=file]', function () {
var  test = $(this).closest('.product-color').clone();
    $(this).closest('.product-color').after(test);
});

这是因为您正在克隆.product-color元素。因此，新创建的元素不会将事件绑定到它们

这是一个有效的jsFiddle

Answer 3

HTML中没有$(".product-color")的父元素。尝试使用last()在最后$(".product-color")之后插入HTML。

$(".product-color").on('change', 'input[type=file]', function () {
    var test = $(this).closest('.product-color').clone();
    $(".product-color").last().after(test);
});

jQuery .on（）方法看不到的新元素

3 个答案: