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

Question

Я использую этот код, чтобы title = "" выглядел лучше.

this.vtip = function () {
    this.xOffset = -10;
    this.yOffset = 10;
    $(".vtip").unbind().hover(function (a) {
        this.t = this.title;
        this.title = "";
        this.top = (a.pageY + yOffset);
        this.left = (a.pageX + xOffset);
        $("body").append('<p id="vtip">' + this.t + "</p>");
        $("p#vtip").css("top", this.top + "px").css("left", this.left + "px").fadeIn("slow")
    }, function () {
        this.title = this.t;
        $("p#vtip").fadeOut("slow").remove()
    }).mousemove(function (a) {
        this.top = (a.pageY + yOffset);
        this.left = (a.pageX + xOffset);
        $("p#vtip").css("top", this.top + "px").css("left", this.left + "px")
    })
};
jQuery(document).ready(function (a) {
    vtip()
});

Тем не менее, после того, как я сделал пост-запрос на странице, эта функция не делает title = "" лучше, они просто выглядят по умолчанию.

Мой вопрос действительно таков: как я могу заставить вышеуказанный код работать с контентом после его динамической загрузки на страницу?

Answer 1

События, привязанные к элементам, будут привязаны только к элементам, существующим на момент запуска кода. Никаких новых элементов, загруженных через ваш ajax, не было, когда ваша функция запускалась при загрузке страницы.

У вас есть 2 варианта.

1. Перепривязывайте события каждый раз, когда вы загружаете новые элементы, которые включают класс vtip. Это будет простой вызов vtip () в вашем обратном вызове ajax success.
2. Перепишите ваш код, используя метод делегирования для событий. В зависимости от версии jQuery методы jQuery могут быть включены (), делегат () или live ()