Question

我正在尝试为每个添加输入字段添加一些数据。

示例是否在输入字段中添加了“info”输入字段。

如果：红色div并没有添加数据，数据应为null，蓝色div和“p”将添加到表单提交中添加的信息输入中。蓝色div和“V”被添加到添加的输入字段中。

如何将此数据添加到添加的输入中，并在提交时将数据添加到他们的值？

我的HTML和jQuery：http://jsfiddle.net/z5qeX/2/

我有一个例子，只有一个输入字段：

    $('.redDiv').click(function() {
        $('#webhost_navn').data('myData', null);
    });
    $('.blueDiv').click(function() {
        $('#webhost_navn').data('myData', 'p');
    });
        $('.blackDiv').click(function() {
        $('#webhost_navn').data('myData', 'V');
    });
// And the form submit button with the id of smt
    $('#smt').click(function() {
        var myData = $('#webhost_navn').data('myData'),
            val = $('#webhost_navn').val();
        if (myData) {
            $('#webhost_navn').val(myData + val);
        }
    });

如何为每个添加的输入创建此功能并将所有数据保存在提交中？

点击其中一个红色，蓝色或黑色时：

1. Select the added input field
2. Create a data variable and save p, V or nothing depending on what div that where clicked. 
3 .On submit add all these variable to values of the correct input fields

Answer 1

很难完全确定你的要求，但我认为你要找的是jQuery的实时功能

$('.redDiv').live('click', function() {$('#webhost_navn').data('myData', null);});

live函数将侦听器绑定到所有新创建的控件。

Answer 2

像

这样的东西

mydata = { "webhost_navn": {red:null, blue:"p", black:"V"}, "....": { ... , ... , ...}}


$('.blackDiv,.blueDiv,.redDiv').live("click", function() {
  var field = $("#"+this.id.replace(this.className,""));
  if (field) field.val(mydata[field.prop("name")][this.className.replace("Div","")];
});

.
.
.
  'id'   : element.prop('id') + 'info',

$(this).parent().append(element).append('<div class="redDiv" id="'+element.prop('id')+'redDiv" style="background:red;width:20px;height:20px;"></div><div class="blueDiv" id="'+element.prop('id')+'blueDiv" style="background:blue;width:20px;height:20px;"> </div><div class="blackDiv" id="'+element.prop('id')+'blackDiv"style="background:black;width:20px;height:20px;"> </div>');
})

如何将数据添加到多个输入字段并在提交时保存？

2 个答案: