Question

我写了jQuery ajax来创建 FitnessPlanDay ：

 // 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);
            });
        });

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

// 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);
    });
});

重复执行jQuery代码

1 个答案: