Repeated execution of jQuery code

Question

I wrote jQuery ajax for create a 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);
            });
        });

It works ok , And I wrote jQuery ajax for Edit TitleDay, since content loaded is loaded via ajax I wrote the following code for the click event:

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

And in my action controller :

 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>";
        }

But the code above only works correctly once. If edit the title the first time it is ok, but for the second or the third time the code runs as many times as previously clicked. If I edit a title twice, the second time the code runs 2 times on the server.

I have no idea why the problem occurs. Where is my problem?

What do you mean it runs two times on the server? Are you sure you don't just append the data everytime? — Liora Haydont
– Liora Haydont, Commented Feb 13, 2018 at 16:25
You're assigning click event handlers inside click event handlers. Your nesting is making it difficult to know what should be done and what shouldn't. Basically, .on("click") and .click() do the same thing and there's no reason you would have one inside another. Move all those bits of code out of each other and see where that leaves you. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Feb 13, 2018 at 16:29
@LioraHaydont yes i'm sure , i checked server side .For the second time (or more) I edit a title (or another title). The request is executed server-side 2 times — arman
– arman, Commented Feb 13, 2018 at 16:30
@Archer i remove the second click but it's still repeating and all the titles are changing — arman
– arman, Commented Feb 13, 2018 at 16:34

Reinstate Monica Cellio · Accepted Answer · 2018-02-13 16:31:56Z

1

Your code has click event handlers being added when things are clicked. I've removed everything that was unnecessary and tidied your code a bit. This should do what you need...

$('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);
    });
});

answered Feb 13, 2018 at 16:31

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reinstate Monica Cellio Over a year ago

No worries - happy to help :)

Collectives™ on Stack Overflow

Repeated execution of jQuery code

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related