div 中动态创建的输入值当前不工作 jQuery

Posted

技术标签:

【中文标题】div 中动态创建的输入值当前不工作 jQuery【英文标题】：Dynamically created input value in div does not work currently jQuery 【发布时间】：2021-07-05 02:53:32 【问题描述】：

我为动态内容设置了 jquery 和 bootstrap collapse。当我为标题键入一些值时，它会为所有动态添加的标题复制。我尝试对任何标题和输入使用个人 ID，但这没有帮助。我怎样才能找到并解决这个问题？

标题被听到

<span id="accordioninnertitle" class="experience_title" data-toggle="collapse" data-target="#exp_1"></span> (<em class="exp_start"></em> - <em class="exp_end"></em>)

谢谢，前进。

html

<div class="wt-tabscontenttitle wt-addnew">
    <h2>Add Your Experience</h2>
    <a href="javascript:void(0);" id="add_experience">Add New</a>
</div>
<ul class="wt-experienceaccordion accordion" id="experience_wrapper">
    <li id="experience_list">
        <div class="wt-accordioninnertitle">
          Title goes here
            <span id="accordioninnertitle" class="experience_title" data-toggle="collapse" data-target="#exp_1"></span> (<em class="exp_start"></em> - <em class="exp_end"></em>)
            <div class="wt-rightarea">
                <a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" id="accordioninnertitle" data-toggle="collapse" data-target="#exp_1" aria-expanded="true">
                    <i class="lnr lnr-pencil"></i>
                </a>
                <a href="javascript:void(0);" class="wt-deleteinfo">
                    <i class="lnr lnr-trash" id="remove_experience"></i>
                </a>
            </div>
        </div>
        <div class="wt-collapseexp collapse hide" id="exp_1" aria-labelledby="accordioninnertitle" data-parent="#accordion">
            <div class="wt-formtheme wt-userform">
                <fieldset>
                    <div class="form-group form-group-half">
                        <input type="text" name="organisation" class="form-control" placeholder="Company Title" id="experience_organisation" />
                    </div>
                    <div class="form-group form-group-half">
                        <input type="date" name="start" class="form-control" placeholder="Starting Date" id="experience_start" />
                    </div>
                    <div class="form-group form-group-half">
                        <input type="date" name="end" class="form-control" placeholder="Ending Date *" id="experience_end" />
                    </div>
                    <div class="form-group form-group-half">
                        <input type="text" name="position" class="form-control" placeholder="Position" />
                    </div>
                    <div class="form-group">
                        <textarea name="descript" class="form-control" placeholder="Your Job Description"></textarea>
                    </div>
                    <div class="form-group">
                        <span>* Leave ending date empty if its your current job</span>
                    </div>
                </fieldset>
            </div>
        </div>
    </li>
</ul>

jQuery

jQuery(function () 
    var experince_count = 1;
    var experince_max_fileds = 5;

    $("#add_experience").click(function (event) 
        if (experince_count < experince_max_fileds) 
            experince_count++;

            $("#experience_wrapper").append(
                '<li id="experience_list">' +
                    '<div class="wt-accordioninnertitle">' +
                    '<span id="accordioninnertitle" class="experience_title" data-toggle="collapse" data-target="#exp_' +
                    experince_count +
                    '"></span>(<em class="exp_start"></em> - <em class="exp_end"></em>)' +
                    '<div class="wt-rightarea">' +
                    '<a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" id="accordioninnertitle" data-toggle="collapse" data-target="#exp_' +
                    experince_count +
                    '" aria-expanded="true">' +
                    '<i class="lnr lnr-pencil"></i>' +
                    "</a>" +
                    '<a href="javascript:void(0);" class="wt-deleteinfo">' +
                    '<i class="lnr lnr-trash" id="remove_experience"></i>' +
                    "</a>" +
                    "</div>" +
                    "</div>" +
                    '<div class="wt-collapseexp collapse hide" id="exp_' +
                    experince_count +
                    '" aria-labelledby="accordioninnertitle" data-parent="#accordion">' +
                    '<div class="wt-formtheme wt-userform">' +
                    "<fieldset>" +
                    '<div class="form-group form-group-half">' +
                    '<input type="text" name="organisation" class="form-control" placeholder="Organisation Name" id="experience_organisation">' +
                    "</div>" +
                    '<div class="form-group form-group-half">' +
                    '<input type="date" name="start" class="form-control" placeholder="Starting Date" id="experience_start">' +
                    "</div>" +
                    '<div class="form-group form-group-half">' +
                    '<input type="date" name="end" class="form-control" placeholder="Ending Date *" id="experience_end">' +
                    "</div>" +
                    '<div class="form-group form-group-half">' +
                    '<input type="text" name="position" class="form-control" placeholder="Position">' +
                    "</div>" +
                    '<div class="form-group">' +
                    '<textarea name="descript" class="form-control" placeholder="Your Job Description"></textarea>' +
                    "</div>" +
                    '<div class="form-group">' +
                    "<span>* Leave ending date empty if its your current job</span>" +
                    "</div>" +
                    "</fieldset>" +
                    " </div>" +
                    "</div>" +
                    "</li>"
            );
        
    );

    $("#experience_wrapper").on("click", "#remove_experience", function (event) 
        event.preventDefault();
        $(this).closest("#experience_list").remove();
        x--;
    );

    $("#experience_wrapper").on("keyup", "#experience_organisation", function (event) 
        $("#experience_wrapper").find(".experience_title").text($(this).val());
    );

    $("#experience_wrapper").on("keyup change", "#experience_start", function (event) 
        $("#experience_wrapper").find(".exp_start").text($(this).val());
    );

    $("#experience_wrapper").on("keyup change", "#experience_end", function (event) 
        $("#experience_wrapper").find(".exp_end").text($(this).val());
    );
);

【问题讨论】：

【参考方案1】：

这是因为您在更改事件中使用了一个类（例如 .experience_title） 在这种情况下，我的意思是最好使用data-attributes（https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes）。您可以使用 experince_count 作为此值。

因此，您需要每个组织名称、日期开始和结束日期的数据属性，这将为您提供相关经验的索引。之后，您需要创建一个“目标”数据属性（我创建了三个更清晰）。最后，您需要更改活动中的选择器。

你可以用连接/分解 id 字符串做同样的事情，但它更复杂，不太清晰，不是很有用。

这是我的答案：

jQuery(function () 
    var experince_count = 1;
    var experince_max_fileds = 5;

    $("#add_experience").click(function (event) 
        if (experince_count < experince_max_fileds) 
            experince_count++;

            $("#experience_wrapper").append(
                '<li id="experience_list">' +
                    '<div class="wt-accordioninnertitle">' +
                    '<span id="accordioninnertitle" class="experience_title" data-toggle="collapse" data-target-title="' +
                    experince_count +
                    '"></span>(<em class="exp_start" data-target-date-start="'+experince_count+'"></em> - <em class="exp_end" data-target-date-end="'+experince_count+'"></em>)' +
                    '<div class="wt-rightarea">' +
                    '<a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" id="accordioninnertitle" data-toggle="collapse" data-target="#exp_' +
                    experince_count +
                    '" aria-expanded="true">' +
                    '<i class="lnr lnr-pencil"></i>' +
                    "</a>" +
                    '<a href="javascript:void(0);" class="wt-deleteinfo">' +
                    '<i class="lnr lnr-trash" id="remove_experience"></i>' +
                    "</a>" +
                    "</div>" +
                    "</div>" +
                    '<div class="wt-collapseexp collapse hide" aria-labelledby="accordioninnertitle" data-parent="#accordion">' +
                    '<div class="wt-formtheme wt-userform">' +
                    "<fieldset>" +
                    '<div class="form-group form-group-half">' +
                    '<input type="text" name="organisation" class="form-control" placeholder="Organisation Name" id="experience_organisation" data-exp="'+experince_count+'">' +
                    "</div>" +
                    '<div class="form-group form-group-half">' +
                    '<input type="date" name="start" class="form-control" placeholder="Starting Date" id="experience_start" data-exp="'+experince_count+'">' +
                    "</div>" +
                    '<div class="form-group form-group-half">' +
                    '<input type="date" name="end" class="form-control" placeholder="Ending Date *" id="experience_end" data-exp="'+experince_count+'">' +
                    "</div>" +
                    '<div class="form-group form-group-half">' +
                    '<input type="text" name="position" class="form-control" placeholder="Position">' +
                    "</div>" +
                    '<div class="form-group">' +
                    '<textarea name="descript" class="form-control" placeholder="Your Job Description"></textarea>' +
                    "</div>" +
                    '<div class="form-group">' +
                    "<span>* Leave ending date empty if its your current job</span>" +
                    "</div>" +
                    "</fieldset>" +
                    " </div>" +
                    "</div>" +
                    "</li>"
            );
        
    );

    $("#experience_wrapper").on("click", "#remove_experience", function (event) 
        event.preventDefault();
        $(this).closest("#experience_list").remove();
        x--;
    );

    $("#experience_wrapper").on("keyup", "#experience_organisation", function (event) 
            value = $(this).attr("data-exp");
        $("#experience_wrapper").find("[data-target-title='"+value+"']").text($(this).val());
    );

    $("#experience_wrapper").on("keyup change", "#experience_start", function (event) 
    value = $(this).attr("data-exp");
        $("#experience_wrapper").find("[data-target-date-start='"+value+"']").text($(this).val());
    );

    $("#experience_wrapper").on("keyup change", "#experience_end", function (event) 
    value = $(this).attr("data-exp");
        $("#experience_wrapper").find("[data-target-date-end='"+value+"']").text($(this).val());
    );
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wt-tabscontenttitle wt-addnew">
    <h2>Add Your Experience</h2>
    <a href="javascript:void(0);" id="add_experience">Add New</a>
</div>
<ul class="wt-experienceaccordion accordion" id="experience_wrapper">
    <li id="experience_list">
        <div class="wt-accordioninnertitle">
          Title goes here
            <span id="accordioninnertitle" class="experience_title" data-toggle="collapse" data-target-title="1"></span> (<em class="exp_start" data-target-date-start="1"></em> - <em class="exp_end" data-target-date-end="1"></em>)
            <div class="wt-rightarea">
                <a href="javascript:void(0);" class="wt-addinfo wt-skillsaddinfo" id="accordioninnertitle" data-toggle="collapse" data-target="#exp_1" aria-expanded="true">
                    <i class="lnr lnr-pencil"></i>
                </a>
                <a href="javascript:void(0);" class="wt-deleteinfo">
                    <i class="lnr lnr-trash" id="remove_experience"></i>
                </a>
            </div>
        </div>
        <div class="wt-collapseexp collapse hide" id="exp_1" aria-labelledby="accordioninnertitle" data-parent="#accordion">
            <div class="wt-formtheme wt-userform">
                <fieldset>
                    <div class="form-group form-group-half">
                        <input type="text" name="organisation" class="form-control" placeholder="Company Title" id="experience_organisation" data-exp="1"/>
                    </div>
                    <div class="form-group form-group-half">
                        <input type="date" name="start" class="form-control" placeholder="Starting Date" id="experience_start" data-exp="1"/>
                    </div>
                    <div class="form-group form-group-half">
                        <input type="date" name="end" class="form-control" placeholder="Ending Date *" id="experience_end" data-exp="1"/>
                    </div>
                    <div class="form-group form-group-half">
                        <input type="text" name="position" class="form-control" placeholder="Position" />
                    </div>
                    <div class="form-group">
                        <textarea name="descript" class="form-control" placeholder="Your Job Description"></textarea>
                    </div>
                    <div class="form-group">
                        <span>* Leave ending date empty if its your current job</span>
                    </div>
                </fieldset>
            </div>
        </div>
    </li>
</ul>

【讨论】：

以上是关于div 中动态创建的输入值当前不工作 jQuery的主要内容，如果未能解决你的问题，请参考以下文章

jquery 动态创造div的并创建不同的id值

jquery在一个父div中动态添加子div，并在每个子div中显示这是当前第几个子div

拖放到动态创建的 div 后，Jquery-ui 可拖动无法正常工作

可拖动的 jQuery UI 不适用于动态创建的 div

动态创建 div 元素（jQuery 移动页面）

JQuery Tabs - 在输入条目上更改选项卡的背景颜色