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>

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

$(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你会有多个，但你只读取第一个元素的值，而不是你写入的元素，所以改为：< / p>

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)

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

2 个答案:

HTML

脚本