jQuery代码的重复执行

Question

我编写了创建FitnessPlanDay的jQuery ajax

 // Add Day ajax
    $('#addDay').on("click",
        function() {
            $.ajax({
                url: '@Url.Action("AddDay")',
                type: 'POST',
                data: {
                    fitnessPlanId: '@fitnessPlan.Id',
                    dayTitle: $("#DayTitle").val()
                }
            }).done(function(result) {
                $('#DayTitle').val('');
                $('#DaysPlace').append(result);
            });
        });

它工作正常，我为Edit TitleDay编写了Edit ajax，因为加载的内容是通过ajax加载的，所以我为单击事件编写了以下代码：

// Edit DayTitle Ajax
$('body').on('click','.title',function() {

            $(this).click(function() {
                var $this = $(this);
                var $findClickedDayId = $this.find('.currentDayId').val();
                $('#dayTitleEditModal #currentDayTitle').text($this.text());
                $('#dayTitleEditModal').modal('show');

                $('#dayTitleEditModal #saveNewDayTitle').on('click',function() {

                    $.ajax({
                            url: '@Url.Action("EditDayTitle")',
                            type: 'POST',
                            data: {
                                newDayTitle: $('#dayTitleEditModal #newDayTitle').val(),
                                currentDayId: $findClickedDayId
                            }
                        }).done(function(result) {
                            $this.text(result);
                        });
                });
            });
    });

在我的行动控制员里：

 public String AddDay(Guid fitnessPlanId, string dayTitle)
        {
            var day = new FitnessPlanDay()
            {
                FitnessPlanId = fitnessPlanId,
                DayTitle = dayTitle
            };
            var newDay = _service.FitnessPlanDayRepository.Add(day);
            return "<div class=\"col-md-offset-2\">" +
                   " <div class=\"col-md-12\">" +
                   " <div class=\"portlet box border\">" +
                   "<div class=\"portlet-heading\">" +
                   " <div class=\"portlet-title\">" +
                   " <h3 class=\"title\">" +
                   "   <i class=\"icon-info\"></i> " +newDay.DayTitle +
                   "<input type=\"hidden\" class=\"currentDayId\" value=\""+newDay.Id+"\">"+
                   "        </h3>" +
                   "   </div>" +
                   " <div class=\"buttons-box\">" +
                   "<a class=\"btn btn-sm btn-default btn-round btn-openMoveModal\"  rel=\"tooltip\" title=\"اضافه کردن حرکت\" href=\"#\"><i class=\"icon-plus\"></i></a>" +
                   "<a class=\"btn btn-sm btn-default btn-round btn-deleteDay\" id=\"" +newDay.Id+"\" rel=\"tooltip\" title=\"حذف روز\" href=\"#\"><i class=\"icon-trash\"></i></a>" +
                   "</div>" +
                   "</div>" +
                   "<div class=\"portlet-body\" id=\"movePlace/"+newDay.Id+"\"></div>" +
                   "</div>" +
                   "</div>" +
                   "</div>";
        }

但是上面的代码只正确工作一次。如果第一次编辑标题是可以的，但是第二次或第三次，代码运行的次数与以前单击的次数相同。如果我编辑了两次标题，那么第二次代码在服务器上运行2次。

我不知道为什么会出现这个问题。我的问题在哪里？

Answer 1

您的代码在单击“事件处理程序”时添加了单击事件处理程序。我删除了所有不必要的内容，并稍微整理了您的代码。这应该能满足你的需要..。

$('body').on('click','.title',function() {
    var $this = $(this);
    var $findClickedDayId = $this.find('.currentDayId').val();
    $('#dayTitleEditModal #currentDayTitle').text($this.text());
    $('#dayTitleEditModal').modal('show');
});

$('#dayTitleEditModal #saveNewDayTitle').on('click',function() {
    $.ajax({
        url: '@Url.Action("EditDayTitle")',
        type: 'POST',
        data: {
            newDayTitle: $('#dayTitleEditModal #newDayTitle').val(),
            currentDayId: $findClickedDayId
        }
    }).done(function(result) {
        $this.text(result);
    });
});