Как сделать обратный вызов + обновить тег div в JavaScript

Question

У меня есть приложение ASP.NET MVC со страницами, на которых содержимое загружается в div из клиента через javascript / jquery / json. Загруженный контент содержит a-теги со ссылками на функцию, которая обновляет vaules на стороне сервера, а затем перенаправляет на перезагрузку всей страницы, хотя.

Я хочу заменить a-теги на что-то, чтобы они все еще вызывали функцию на стороне сервера, а затем перезагрузить только div.

Каков «правильный» способ сделать это?

Будьте нежны - я новичок в JS; -)

Все комментарии приветствуются,

Андерс, Дания

Это так далеко, как я дошел. getResponseCell () возвращает td-тег, заполненный a-тегом. Я исказил предложение Гленса в дополнение .click (), но оно просто вызывает onClickedEvent ...

Пример кода:

    onClickedEvent=function()
    {
        return false;
    }

    getResponseCell=function(label, action, eventId)
    {
        tmpSubSubCell=document.createElement("td");
        link = document.createElement("A");
        link.appendChild( document.createTextNode( label));
        link.setAttribute("href", "/EventResponse/"+ action + "/" + eventId);
        //link.setAttribute("href", "#divContentsEventList");
        //link.setAttribute("onclick", "onClickedEvent(); return false;");
        link.setAttribute("className", "eventResponseLink");


        link.click(onClickedEvent());

        // link=jQuery("<A>Kommer<A/>").attr("href", "/EventResponse/"+ action + "/" + eventId).addClass("eventResponseLink");
        // link.appendTo(tmpSubSubCell);
        tmpSubSubCell.appendChild(link);

        return tmpSubSubCell;
    }

---

И решение, которое сработало для меня, выглядит так:

    onClickedEvent=function(event, actionLink)
    {
            event.preventDefault(); 

            $("eventListDisplay").load(actionLink);

            refreshEventList();                

            return false;
    }

    getResponseCell=function(label, action, eventId)
    {
        tmpSubSubCell=document.createElement("td");
        link = document.createElement("A");
        link.setAttribute("id",action + eventId);
        link.appendChild( document.createTextNode( label));
        actionLink = "/EventResponse/"+ action + "/" + eventId;
        link.setAttribute("href", actionLink);
        className = "eventResponseLink"+ action + eventId;
        link.setAttribute("className", className);

        $('a.'+className).live('click', function (event)
            {
                onClickedEvent(event,$(this).attr('href'));
            });

        tmpSubSubCell.appendChild(link);

        return tmpSubSubCell;
    }

Answer 1

Не видя больше информации .....

Если вы добавлены в DOM после начальной загрузки страницы, вы не можете использовать обычные click() или bind() методы в jQuery; это потому, что эти методы связывают события только с теми элементами, которые зарегистрированы в DOM во время вызова методов. live(), с другой стороны, зарегистрирует событие для всех текущих и будущих элементов (используя механизм всплытия событий в Javascript).

$(document).ready(function () {
    $('a.eventResponseLink').live('click', function (event) {
        var self = $(this);

        self.closest('div').load('/callYourServerSideFunction.asp?clickedHref=' + self.attr('href'));

        event.preventDefault();
    });
});

Мы используем event.preventDefault() для предотвращения выполнения действия по умолчанию для тега a; например перезагрузка или изменение страницы.

Редактировать: Проблема не будет вызвана этим. Это сила jQuery; возможность привязать одно и то же событие к нескольким элементам. Проверьте свой HTML; может быть, вы где-то пропускаете закрывающую </a>? Может быть, вы связываете событие в месте, которое вызывается несколько раз? Каждый раз, когда вызывается .live(), он добавляет ДРУГОЙ обработчик события ко всем соответствующим элементам. Его нужно связать только один раз при загрузке страницы.

jQuery предоставляет множество способов выбора элементов; проверьте список . Глядя на вашу переменную ссылки, похоже, что все ваши ссылки имеют href, начинающийся с /EventResponse/; так что вы можете использовать $('a[href^=/EventResponse/]') в качестве селектора.

Answer 2

Нам нужен код, чтобы дать вам правильный ответ, но следующий код поймает щелчок a-тега и перезагрузит div, внутри которого он находится:

$(document).ready(function() {
    $("a").click(function() {
        //call server-side function
        var parentDiv = $(this).parents("div:first");
        $(parentDiv).load("getContentOfThisDiv.asp?id=" + $(parentDiv).attr("id"));
    });
});

В приведенном выше коде при нажатии на ссылку div, внутри которого находится эта ссылка, будет загружен в ответ на вызов asp-файла. Идентификатор div отправляется в файл в качестве параметра.