Удалить диалог подтверждения в jQuery на динамическом c контенте

Question

My div содержит записи, которые добавляются динамически. Когда я нажимаю на ссылку «Удалить», она генерирует окно подтверждения 3 раза, если у меня 3 записи, 5 раз, если у меня 5 записей и т. Д.

Я хочу отобразить поле confirm для этого только конкретный ряд. Как я могу это сделать?

```
<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= imagehs.ClientID %>").on("click", function (event) {
            $("#textboxX").html("");
            $("#textboxY").html("");
            $("#textboxBPart").html("");
            $("#divSaveDynamicDis").html("");
            var values = new Array();
            var x = event.pageX;
            var y = event.pageY;
            //$(".marker").remove();
            $("body").append(
               // $('<div class="marker"></div>').css({
                //$('<div class="marker m_' + x + '_' + y + '" divdata-marker="m_' + x + '_' + y + '"></div>').css({
                $('<div class="marker m_' + x + '_' + y + '"></div>').css({
                    position: 'absolute',
                    top: y + 'px',
                    left: x + 'px',
                    //top: event.pageY + 'px',
                    //left: event.pageX + 'px',
                    width: '10px',
                    height: '10px',
                    background: '#dd4b39',
                    'border-radius': '10px'
                }) 
            );
           
            $("#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>");

            var $r = $('<button />', { type: 'button', text: 'Refresh Data', id: 'btn_refresh' });

            var $cancle = $('<button />', { type: 'button', text: 'Cancle', id: 'btn_cancle' });

            $("#divSaveDynamicDis").append($r);
            $("#divSaveDynamicDis").append($cancle);
            $r.on('click', function () {
                if ($('input#txtName').val() == "") {
                    alert('Please complete the field');
                    $('input#txtName').focus();
                    return false;
                }
                //var NewData = '<div cla-ss="col-sm-12">' + x + '   ' + y + '  ' + txtName.value + ' &nbsp; <a href="javascript:void(0);" class="remCF" data-atrib=' + x +'>Remove</a> </div>';
                //var NewData = '<div class="col-sm-12">' + x + '   ' + y + '  ' + txtName.value + ' &nbsp; <a href="javascript:void(0);" class="remCF" data-marker="m_' + x + '_' + y + '">Remove</a> </div>';
                var NewData = '<div class="col-sm-12">' + x + '   ' + y + '  ' + txtName.value + ' &nbsp; <a href="javascript:void(0);" class="remCF" data-marker="m_' + x + '_' + y + '">Remove</a> </div>';
                $("#divdynamicData").append(NewData);
                $("#textboxX").html("");
                $("#textboxY").html("");
                $("#textboxBPart").html("");
                $("#divSaveDynamicDis").html("");
            });
            $('.marker').on('click', function () {
                $(this).remove();
               // div_ref = $(this).attr('divdata-marker')
               // $('#divdynamicData.' + div_ref).remove()
            });
            //$("#divdynamicData").live('click', '.remCF', function () {
            //$("#divdynamicData").on('click', '.remCF', function () {
            //    //if (confirm("Are you sure?")) {

            //        marker_ref = $(this).attr('data-marker')
            //        $('.marker.' + marker_ref).remove()
            //        $(this).parent().remove();
            //    //}
            //    //return false;
            //});
            $("#divdynamicData").on('click', '.remCF', function () {
               // if (confirm("Are you sure you want to delete?")) {
                    marker_ref = $(this).attr('data-marker')
                    $('.marker.' + marker_ref).remove()
                    $(this).parent().remove();
              //  }
            });
            $cancle.on('click', function () {
                $("#textboxX").html("");
                $("#textboxY").html("");
                $("#textboxBPart").html("");
                $("#divSaveDynamicDis").html("");
                
            });
            
        });
    });

```
$("#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>");

var NewData = '<div class="col-sm-12">' + x + '   ' + y + '  ' + txtName.value + ' &nbsp; <a href="javascript:void(0);" class="remCF" data-marker="m_' + x + '_' + y + '">Remove</a> </div>';
$("#divdynamicData").append(NewData);

$("#divdynamicData").on('click', '.remCF', function() {
  // if (confirm("Are you sure you want to delete?")) {
  marker_ref = $(this).attr('data-marker')
  $('.marker.' + marker_ref).remove()
  $(this).parent().remove();
  //  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 1

Я предполагаю, что вы используете этот код внутри al oop или внутри другого события. Приведенный ниже код должен быть удален из этого цикла / события и использоваться только один раз на вашей странице:

$("#divdynamicData").on('click', '.remCF', function () {
               // if (confirm("Are you sure you want to delete?")) {
                    marker_ref = $(this).attr('data-marker')
                    $('.marker.' + marker_ref).remove()
                    $(this).parent().remove();
              //  }
            });

Поскольку это щелчок делегата, каждый раз, когда вы объявляете этот код, новый прослушиватель событий будет привязан к вашему div, слушающему клики на .remCF, так что по вашему клику будет запущено несколько событий.

Подробнее: JQuery API .on ()

Answer 2

Ваш код короток, возвращая значение confirm. Другими словами, как только вы вернете значение confirm, ни один из приведенных ниже кодов не сработает. Вместо этого вы хотите проверить, что пользователь выбрал из подтверждения с помощью условия, и поместить свой код удаления в исходный блок:

$("#divdynamicData").on('click', '.remCF', function() {
  if (confirm("Are you sure you want to delete?")) {
    var marker_ref = $(this).attr('data-marker');

    $('.marker.' + marker_ref).remove();

    $(this).parent().remove();
  }
});