函数不适用于动态添加的表单字段

Question

我创建了带有 2 个字段的表单，用户可以在其中添加值以使用他的值生成矩形 div。

    <form>
        <fieldset class="fieldset">1
        <input type="text" id="test" name="test" />2
        <input type="text" id="test2" name="test" />
        </fieldset>
        <input type="button" id="add_new" value="add new">
    </form>
<div id="dimensions"></div>
<div id="trouble"></div>
<div id="texte"></div>

一切都很完美，但现在我添加了一些功能来动态添加更多带有表单的字段集。我想用表单字段为每个字段集绘制矩形 div。当我在第一行输入值 100x200px 时，jquery 将使用这些尺寸绘制 div，但是当我输入第二个或第三个字段集时，div 将用另一个字段集中的值重绘。我不知道为什么动态添加的字段集中的这些值不起作用.

$(document).ready(function () {

var fieldset_parent = $(".fieldset:eq(0)").clone();

$(document).on("click", "input#add_new", function () {
            $("fieldset:last").after($(fieldset_parent).clone());
});

$("#test, #test2").keyup(function () {
    var width = parseInt($("#test").val());
    var height = parseInt($("#test2").val());
    var max = 200;
    var min = 20;

    var ratio;
    if (width >= height) {
        $("#trouble").html("Width bigger");
        ratio = max / width;
        width = ratio * width;
        height = height * ratio;
    } else {
        $("#trouble").html("height bigger");
        ratio = max / height;
        height = ratio * height;
        width = width * ratio;
    };
    $("#dimensions").html(width + " x " + height);
    $("#texte").css({
        "width": width + "px",
            "height": height + "px"
    });

});
});

And here is my code of fiddle

非常感谢您的帮助

Answer 1

你必须改变

$("#test, #test2").keyup(function () {

到

$("body").on('keyup', '#test, #test2', function () {

这也行不通

var width = parseInt($("#test").val());
var height = parseInt($("#test2").val());

因为它会返回第一个匹配元素的值 - 如果你克隆 #test 和 #test2 你会有多个，但你只读取第一个元素的值，而不是你写入的元素，所以改为：

var width = parseInt($(this).parent().children('#test').val());
var height = parseInt($(this).parent().children('#test2').val());

另外你不应该克隆具有相同 id 的元素，所以改为类而不是 id。

此处包含更改的完整代码： http://jsfiddle.net/mattydsw/xzGXF/1/

Answer 2

您可能希望将 id 转换为类（以避免 id 重复）以及为 keyup 事件动态创建的输入的事件委托。尝试这种方式：由于您需要每个部分的形状，您可以将它们包装到单个字段集中。

HTML

<form>
    <fieldset class="fieldset">1
        <input type="text" class="test" name="test" />2
        <input type="text" class="test2" name="test" />
        <div class="dimensions"></div>
        <div class="trouble"></div>
        <div class="texte"></div>
    </fieldset>
    <input type="button" id="add_new" value="add new">
</form>

脚本

$(document).ready(function () {

    var fieldset_parent = $(".fieldset:eq(0)").clone();

    $('form').on("click", "input#add_new", function () {
        $("fieldset:last").after($(fieldset_parent).clone());
    });



  $(document).ready(function () {

    var fieldset_parent = $(".fieldset:eq(0)").clone();

    $('form').on("click", "input#add_new", function () {
        $("fieldset:last").after($(fieldset_parent).clone());
    });

    $('form').on('keyup', ".test, .test2", function () {

        var $parent = $(this).closest('.fieldset'); //Get the closest fieldset (parent) of the textbox under question.
        var width = parseInt($(".test", $parent).val()); //get the value of textbox within the parent, as the context.
        var height = parseInt($(".test2", $parent).val());//get the value of textbox within the parent, as the context.
        var max = 200;
        var min = 20;

       var ratio;
       $(".trouble", $parent).html(function(){ //Set the html based on width >=height
                return width >= height ? "Width bigger" : "height bigger";
       }); 

         ratio = max / width;
         width = ratio * width;
         height = height * ratio;

        $(".dimensions", $parent).html(width + " x " + height);
        $(".texte", $parent).css({
            "width": width + "px",
            "height": height + "px"
        });

    });
});

Demo

• .closest()
• .html(func)