Question

我正在尝试将日历字段附加到动态添加的html代码中。最初，代码显示3个输入字段（如“p_scents”div中所示）。单击“添加另一个雇主”时，它应生成另外3个输入（如上所述）。我可以生成前两个字段（没有日历字段），但是当我添加日历字段时，它无效。

<body>
<h2><a href="#" id="addScnt">Add Another Employer</a></h2>
    <div id="p_scents">
<p>
    <label>Employer Name</label><input class="dynamic" type="text" name="employern" id="employern" />
    <label>Job Title</label><input class="dynamic" type="text" name="jtitle" id="jtitle" />
    <label>Start Date </label>
<input type="text" name="startd" class="textfield" />
        <script language="JavaScript">
        new tcal ({
        // form name
        'formname': 'form',
        // input name
        'controlname': 'startd'
});
</script>
</p>
</div>

<script type="text/javascript">
$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $('#addScnt').live('click', function() {
        if( i <= 10 ) {
            $('<p><label>Employer Name</label><input class="dynamic" type="text"     name="employern' + i +'" id="employern" /><label>Job Title</label><input class="dynamic" type="text" name="jtitle' + i +'" id="jtitle" /><label>Start Date </label>
<input type="text" name="startd' + i +'" class="textfield" />
        <script language="JavaScript">
        new tcal ({'formname': 'form','controlname': 'startd' + i +''});</script><a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;}
        else{
            alert('Maximum Reached!');
        }
    });

    $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
});
</script>
</body>

Answer 1

抱歉，您的代码中有很多错误/不好的东西。我试图提出一些建议如何改进，但首先，出了什么问题：

ID必须是唯一的。在您的代码中，您为多个元素提供相同的ID。特别是删除链接不起作用。
字符串在JavaScript中不能跨越多行。
不要将这么多HTML添加为字符串。您在此字符串中有引号错误。
不要以这种方式添加<script>标签（至少在这里没有必要）。

我的建议：

从HTML中删除script标记，您不需要它并删除输入元素的ID

<h2><a href="#" id="addScnt">Add Another Employer</a></h2>
<div id="p_scents">
    <p>
        <label>Employer Name</label><input class="dynamic" type="text" name="employern" />
        <label>Job Title</label><input class="dynamic" type="text" name="jtitle" />
        <label>Start Date </label>
        <input type="text" name="startd" class="textfield" />
    </p>
</div>

您也无需在#addScnt上使用live ^[docs]作为点击事件处理程序。只需使用click ^[docs]：

$('#addScnt').click(...

对于动态添加的元素，您只需要live。

现在最重要的是：如何添加新字段。

您可以通过克隆现有的p元素轻松完成此操作。您唯一需要记住的是更改输入字段的名称（添加i）并调用tcal函数：

$('#addScnt').click(function() {
    if (i <= 10) {
        $('#p_scents p:first').clone() // clone
            .find('input').attr('name', function(index, value) { // change name
                return value + i;
            }).end()
        .append('<a href="#" class="remScnt">Remove</a>') // add remove link
        .appendTo(scntDiv);

        // init calender
        new tcal({
            formname: 'form',       
            controlname: 'startd'+i
        });

        i++;
        return false;
    }
    else {
        alert('Maximum Reached!');
    }
});

参考：clone ^[docs]，attr ^[docs]

请注意，移除链接包含class，而不是id。对于此链接，最好使用delegate ^[docs]：

$('#p_scents').delegate('.remScnt', 'click', function() {
    if (i > 2) {
        $(this).closest('p').remove();
        i--;
    }
    return false;
});

另请注意，我在这里使用closest ^[docs]，它只提供最接近的p元素。如果您使用parents，则会删除所有祖先p元素，这可能导致删除的内容超出预期。

最后但同样重要的是，您还必须拨打

new tcal ({
    // form name
    'formname': 'form',
    // input name
    'controlname': 'startd'
});

因为我们删除了script代码。

以下是所有内容的工作演示：http://jsfiddle.net/fkling/ygSn9/（空tcal函数）。

动态添加的字段不与日历字段一起使用

1 个答案: