JQuery Async проблема обратной передачи, как я могу это исправить?

Question

У меня есть следующий код JQuery, который выполняет аналогичные функции, такие как Stackoverflow, когда пользователь нажимает на ссылку комментария и отображает комментарии или в этом случае отвечает на обновление статуса участника, как правило, он прекрасно работает, за исключением случаев, когда участник публикует новый обновление состояния, которое обновляет список обновлений состояния с помощью асинхронной обратной передачи ajax в ASP.net MVC.

Что происходит, если вы нажимаете на новый элемент в списке, он переносит их на новую страницу вместо того, чтобы делать то, что должен делать JQuery.

<script type="text/javascript">

    $(function() {
        $("a[id ^='commentLink-']").click(function() {
            match = this.id.match(/commentLink-(\d+)/);
            container = $("div#commentContainer-" + match[1])
            container.toggle();

            if (container.is(":visible")) {
                container.load($(this).attr("href"));
            } else {
                container.html("Loading...");
            }
            return false; //Prevent default action
        });
    });
</script>

Примечание: Я думаю, что причиной этого является тот факт, что новый элемент в списке на самом деле отсутствует на странице, так как список был обновлен с помощью ajax, поэтому новый HTML не существует пока страница не обновится.

Обновление Хорошо, как бы я использовал эту функциональность в режиме реального времени / события, о которой говорил Паоло Бергантино в своем ответе, чтобы вызвать ASP.net MVC ActionResult?

Answer 1

Ознакомьтесь с новой функцией Events/live в jQuery 1.3

Привязывает обработчик к событию (например, нажатию) для всех текущих и будущих элементов.

Поэтому, когда вы добавляете новые элементы, jQuery должен добавить к ним событие click с этим.

Если по какой-то странной причине вы не хотите обновляться до jQuery 1.3, вы можете проверить плагин livequery.

РЕДАКТИРОВАТЬ в ответ на обновление :

Фактический код для использования .live будет выглядеть примерно так:

$(function() {
    $("a[id ^='commentLink-']").live('click', function(event) {
        match = this.id.match(/commentLink-(\d+)/);
        container = $("div#commentContainer-" + match[1])
        container.toggle();

        if (container.is(":visible")) {
            container.load($(this).attr("href"));
        } else {
            container.html("Loading...");
        }
        event.preventDefault();
    });
});

Внесенные изменения в основном во 2-й строке, где

$("a[id ^='commentLink-']").click(function() {

было заменено на

$("a[id ^='commentLink-']").live('click', function(event) {

Теперь я также получаю аргумент event, который нужно использовать для event.preventDefault();. Именно так вам рекомендуется останавливать события с помощью jQuery. Однако, если return false; добьется цели, вы можете оставить это.

Я еще не использовал .live, но я думаю, что это должно сработать. Убедитесь, что вы установили jQuery 1.3 на свой сервер, прежде чем пытаться это делать. :)