jquery:读取每个div,span和input里面

时间:2017-06-14 17:00:51

标签: javascript jquery html asp.net clone

我正在ASP.NET MVC和jQuery中创建一个项目。当用户点击addSentence按钮时,我想复制一个名为div的{​​{1}}所有事件,并将其插入另一个名为copythis的div中。

myform中我有两个div:第一个是copythis名为span,我在sentence中插入文本,用户可以添加第二个多于一个具有不同文本的字段。

当用户点击名为input的按钮时,我想阅读save中的所有copythis并创建一个发送到webapi的结构。 我有一个问题是javascript,因为我可以正确阅读每个div。

myform
        $("#addSentence").on("click", function (event) {
            if ($("#inputSentence").val() == "")
                alert("Sentence must have a value");
            else {
                event.preventDefault();
                var theContainer = $("#copythis");
                if (theContainer != null) {
                    var clonedSection = $(theContainer).clone(true);
                    if (clonedSection != null) {
                        $(clonedSection).find("#sentence")
                                        .text($("#inputSentence").val());
                        $(clonedSection).appendTo("#myform");
                    }
                }
            }
    });

    $("#save").on("click", function (event) {
        $("#myform #copythis").children().each(function (index, element) {
            var elm = $(this);
            var sentence = elm.find('.row span#sentence').val();
            if (sentence != '') {
                console.log('Sentence: ' + sentence);
                $("input").children().each(function (m, l) {
                    var txt = $(this).val();
                    if (txt != '') {
                        console.log('Example: ' + txt);
                    }
                });
            }
        });
    });

    function makeRepeater(sectionsSelector, addClass, removeClass, AYSMsg) {
        $(sectionsSelector + " " + addClass + "," + sectionsSelector + 
          " " + removeClass).on("click", function (event) {
            // Avoiding the link to do the default behavior.
            event.preventDefault();

            // Get the container to be removed/cloned
            var theContainer = $(this).parents(sectionsSelector);
            if ($(this).is(addClass)) {

                // Cloning the container with events
                var clonedSection = $(theContainer).clone(true);

                // And appending it just after the current container
                $(clonedSection).insertAfter(theContainer);
            } else {
                // If the user confirm the "Are You Sure" message
                // we can remove the current container
                if (confirm(AYSMsg)) {

                    // Making fade out, hide and remove element a sequence
                    // to provide a nice UX when removing element.
                    $(theContainer).fadeOut('normal',
                        function () {
                            $(this).hide('fast',
                                function () { $(this).remove(); }
                            );
                        }
                    );
                }
            }
        });
    }

    makeRepeater(
        '.my-repeated-section-form',   /* The container selector */
        '.addform',                   /* The add action selector */
        '.removeform',                /* The remove action selector */
        'Are you sure you want to remove this section?' /* The AYS message. */
    );

0 个答案:

没有答案