Dynami c Textbox только один раз с использованием цикла jquery

Question

<%@ Page Title="" Language="C#" MasterPageFile="~/Administration/Admin.Master" AutoEventWireup="true" CodeBehind="ImageHotSpot.aspx.cs" Inherits="EHealth.Administration.ImageHotSpot" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script src="../plugins/jQuery/jQuery-2.1.3.min.js"></script>

<%--<script>
    $(document).ready(function () {
        $('#imagehs').click(function (e) {
            var offset_t = $(this).offset().top - $(window).scrollTop();
            var offset_l = $(this).offset().left - $(window).scrollLeft();

            var left = Math.round((e.clientX - offset_l));
            var top = Math.round((e.clientY - offset_t));

            alert("Left: " + left + " Top: " + top);

        });
    });
</script>--%>
   <script type="text/javascript">
        $(document).ready(function () {

            $("#<%= imagehs.ClientID %>").on("click", function (event) {
                var values = new Array();

                //var x = event.pageX - this.offsetLeft;
                //var y = event.pageY - this.offsetTop;

                var x = event.pageX;
                var y = event.pageY;
                //$(".marker").remove();
                $("body").append(
                    $('<div class="marker"></div>').css({
                        position: 'absolute',
                        //top: y + 'px',
                        //left: x + 'px',
                        top: event.pageY + 'px',
                        left: event.pageX + 'px',
                        width: '10px',
                        height: '10px',
                        background: '#FFFFFF'
                    }) 
                );
                $("#textboxX").append('<div><input type="text" value="' + x + '" id="txtX" name="txtX"/></div>');
                $("#textboxY").append('<div><input type="text" value="' + y + '" id="txtY" name="txtY"/></div>');
                $("#textboxBPart").append("<div><input type='text' id='txtName' name='txtName'/></div>");
                //$('input #txtName').each(function () {
                //    if (this.value != '')
                //        values.push(this.value);
                //    alert(this.value);
                //});
                //alert($('#txtName).val());
                var $r = $('<button />', { type: 'button', text: 'Refresh Data', id: 'btn_refresh' });
                $("#divSaveDynamicDis").append($r);
                $r.on('click', function () {
                    //$("#txtName").each(function () {alert($(this).val());});
                    var NewData = '<div class="col-sm-12">' + x + y + txtName.value + '</div>';
                    $("#divdynamicData").append(NewData);
                    $("#textboxX").remove();
                    $("#textboxY").remove();
                    $("#textboxBPart").remove();
                    $("#divSaveDynamicDis").remove();

                });

            });
        });
</script>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Image Hotspot</li>
        </ol>
    </nav>
    <section class="content">
        <div class="row">
            <div class="col-lg-12">
                <div class="box box-primary box-solid no-margin">

                    <div class="box-header">
                        <h3 class="box-title"><b>&nbsp;<i class="fa fa-hospital-o"></i>&nbsp;&nbsp;Image Hotspot</b></h3>
                    </div>
                    <!-- /.col-lg-12 -->

                    <div class="panel panel-default">
                        <form>
                            <div class="panel-body">
                                <div class="row">

                                    <div class="col-lg-6">
                                        <fieldset>
                                            <div class="form-group">
                                                <label>Upload Image</label>
                                                <asp:FileUpload ID="imageHotspotUpload" runat="server"  />

                                            </div>
                                        </fieldset>
                                    </div>
                                     <div class="col-lg-6">
                                        <fieldset>
                                            <div class="form-group">
                                                <label>Active</label>
                                                <input type="checkbox" runat="server"  name="chkIsActive" id="chkIsActive" />
                                            </div>
                                        </fieldset>
                                    </div><br />
                                    <div class="col-lg-6">
                                        <asp:GridView ID="GridView1" runat="server"  AutoGenerateColumns="false" ShowHeader="false">
                                         <Columns>
                                            <asp:BoundField DataField="Text" />
                                            <asp:ImageField DataImageUrlField="Value" ControlStyle-Height="100" ControlStyle-Width="100" />
                                        </Columns>  
                                        </asp:GridView>
                                    </div>

                                    <div class="col-lg-6">
                                      <asp:Image id="imagehs" name="imagehs" runat="server" Height = "500" Width = "500"/>
                                      <div id="textboxX"></div> 
                                      <div id="textboxY"></div> 
                                      <div id="textboxBPart"></div>
                                      <div id="divSaveDynamicDis"></div>
                                      <div id="divdynamicData"></div>

                                    </div>

                                </div>
                            </div>
                            <div class="panel-heading">
                                <asp:Button ID="btnSave" runat="server" Text="Button" OnClick="btnSave_Click"/>
                               <%-- <asp:Button ID="btn_save" runat="server" Text="Save" type="submit" class="btn btn-primary" OnClick="btn_save_Click" />--%>
                                <asp:Button ID="btn_cancel" runat="server" type="reset" class="btn btn-danger" Text="Cancel" formnovalidate />

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </section>

</asp:Content>

Моя задача 1) При использовании нажмите на изображение, получите значения X и Y изображения 2) По заданному значению c XY я хочу добавить текст 3) а вот что получится при первом показе изображения 4) Когда я в первый раз нажимаю на него ... работает файл, но во второй раз, когда я нажимаю на изображение, значение txtName остается неопределенным ... и каждый раз, когда я нажимаю в текстовом поле генерировать 3 3 3 3 ... 5) Вот что я хочу, чтобы при первом использовании нажмите кнопку «Создать текстовое поле 3» ... еще раз при использовании нажмите на изображение, обновите значение XY и сделайте значение txtNAME пустым ... надеюсь, вы понимаете, о чем я говорю, я хочу добавить только текстовое поле один раз ...

Answer 1

Прежде всего, проверьте, звоните ли вы в FORM, нажав на изображение , потому что я тестирую страницу HTML вместо asp в качестве вашей и нажимаю на отправку формы, у меня было удалить тег .

Код дублирует текстовое поле, потому что вы используете append , это добавит N текстовое поле, перед добавлением дополнительного текстового поля вы должны очистить существующие элементы управления.

Я изменяю ваш код jQuery из этого:

$(document).ready(function () {

        $("#<%= imagehs.ClientID %>").on("click", function (event) {
            var values = new Array();

            //var x = event.pageX - this.offsetLeft;
            //var y = event.pageY - this.offsetTop;

            var x = event.pageX;
            var y = event.pageY;
            //$(".marker").remove();
            $("body").append(
                $('<div class="marker"></div>').css({
                    position: 'absolute',
                    //top: y + 'px',
                    //left: x + 'px',
                    top: event.pageY + 'px',
                    left: event.pageX + 'px',
                    width: '10px',
                    height: '10px',
                    background: '#FFFFFF'
                }) 
            );
            $("#textboxX").append('<div><input type="text" value="' + x + '" id="txtX" name="txtX"/></div>');
            $("#textboxY").append('<div><input type="text" value="' + y + '" id="txtY" name="txtY"/></div>');
            $("#textboxBPart").append("<div><input type='text' id='txtName' name='txtName'/></div>");
            //$('input #txtName').each(function () {
            //    if (this.value != '')
            //        values.push(this.value);
            //    alert(this.value);
            //});
            //alert($('#txtName).val());
            var $r = $('<button />', { type: 'button', text: 'Refresh Data', id: 'btn_refresh' });
            $("#divSaveDynamicDis").append($r);
            $r.on('click', function () {
                //$("#txtName").each(function () {alert($(this).val());});
                var NewData = '<div class="col-sm-12">' + x + y + txtName.value + '</div>';
                $("#divdynamicData").append(NewData);
                $("#textboxX").remove();
                $("#textboxY").remove();
                $("#textboxBPart").remove();
                $("#divSaveDynamicDis").remove();

            });

        });
    });

На это (обратите внимание, что я изменяю идентификатор элемента управления, потому что я не использую ASP).

$(document).ready(function() {
    $("#imagehss").on("click", function() {
        $("#divdynamicData").html("");
        $("#textboxX").html("");
        $("#textboxY").html("");
        $("#textboxBPart").html("");
        $("#divSaveDynamicDis").html("");

        var values = new Array();
        //var x = event.pageX - this.offsetLeft;
        //var y = event.pageY - this.offsetTop;

        var x = event.pageX;
        var y = event.pageY;
        //$(".marker").remove();

        $("body").append(
        $('<div class="marker"></div>').css({
            position: "absolute",
            //top: y + 'px',
            //left: x + 'px',
            top: event.pageY + "px",
            left: event.pageX + "px",
            width: "10px",
            height: "10px",
            background: "#FFFFFF"
        })
    );
    $("#textboxX").append(
        '<div><input type="text" value="' + x + '" id="txtX" name="txtX"/></div>'
     );
     $("#textboxY").append(
        '<div><input type="text" value="' + y + '" id="txtY" name="txtY"/></div>'
     );
     $("#textboxBPart").append(
         "<div><input type='text' id='txtName' name='txtName'/></div>"
     );
     //$('input #txtName').each(function () {
     //    if (this.value != '')
     //        values.push(this.value);
     //    alert(this.value);
     //});
     //alert($('#txtName).val());
     var $r = $("<button />", {
        type: "button",
        text: "Refresh Data",
        id: "btn_refresh"
     });
     $("#divSaveDynamicDis").append($r);
     $r.on("click", function() {
         //$("#txtName").each(function () {alert($(this).val());});
         var NewData =
         '<div class="col-sm-12">' + x + y + txtName.value + "</div>";
         $("#divdynamicData").append(NewData);
         $("#textboxX").html("");
         $("#textboxY").html("");
         $("#textboxBPart").html("");
         $("#divSaveDynamicDis").html("");
      });
    });
});

Обратите внимание, что я изменяю Remove () на html (""), потому что удаление, как и слово, сказал удалить все элементы управления, html ("") просто очистить содержимое html, не удаляя контроль.

Вы можете проверить это работает здесь на Codepen