JQuery не работает с добавленными элементами с помощью AJAX

524
02 января 2017, 21:30

Не работает этот скрипт с элементами, добавленными через ajax.

// add to compare
$("a.add_to_compare").click(function(e){ e.preventDefault() });
new InSales.Compare({
  _textAdd: 'Добавлено',
  _textLink: 'К сравнению',
    selector: 'a.add_to_compare',
    draw: function(products) {
        if (products.length == 0) {
             $('.compare-notice').slideDown();
             $('#compare_div').slideUp('fast');
        }
        var compareCount = $('#compare_table .item').length;
        var compareCountNames = 'товар';
        if (compareCount > 1) {compareCountNames = 'товара';} 
        var compareCountMsg = 'Вы сравниваете '+compareCount+' '+compareCountNames
        $('.compare_count').html(compareCountMsg);
        if (!$("#compare_table .same").length) {
            $(".compare_show_similar, .compare_hide_similar").hide();
        } else {
            $(".compare_show_similar, .compare_hide_similar").show();
            $(".compare_show_similar").live("click", function () {
                $('.compare_links a').removeClass('active');
                $(".compare_show_similar").addClass('active');
                $("#compare_table .same").show();
            });
            $(".compare_hide_similar").live("click", function () {
                $('.compare_links a').removeClass('active');
                $(".compare_hide_similar").addClass('active');
                $("#compare_table .same").hide();
            });
        }
        $('.compare_clear a').click(function(){
            show_preloader();
            $.cookie('compare', null);
            $('.compare-notice').slideDown();
            $('#compare_div').slideUp('fast');
            hide_preloader();
        })
        var text = '';
        console.log(products.length)
        if (products.length == 0) {
            text += '<div class="noforcompare">Нет товаров для сравнения</div>';
            $('#compare_div').html('<p>Товары для сравнения не выбраны</p><p><a href="/"  class="button" title="На главную">На главную</a></p>');
        } else {
            text += '<ol id="compare-items">'
              $(products).each(function(index,product) {
                  text += '<li class="item odd"><a href="javascript:;" rel="'+product.id+'" class="remove_compare btn-remove">удалить</a><p class="product-name"><a href="/product/?product_id='+product.id+'">'+product.title+'</a></p></li>';
              });
            text +='</ol><div class="actions"><button type="button" class="button" onclick="location.href = \'/compares\'"><span><span>Сравнить</span></span></button></div>'
        }
        $('.block-compare .block-content').html(text);   
    }
 });})

Это можно как-то исправить? Пробовал использовать .on, но не получилось.

Answer 1

Попробуйте сделать так:

var add_to_compare = function() {
   $("a.add_to_compare").click(function(e){ e.preventDefault() });
   new InSales.Compare({
     _textAdd: 'Добавлено',
     _textLink: 'К сравнению',
     selector: 'a.add_to_compare',
     draw: function(products) {
        if (products.length == 0) {
             $('.compare-notice').slideDown();
             $('#compare_div').slideUp('fast');
        }
        var compareCount = $('#compare_table .item').length;
        var compareCountNames = 'товар';
        if (compareCount > 1) {compareCountNames = 'товара';} 
        var compareCountMsg = 'Вы сравниваете '+compareCount+' '+compareCountNames
        $('.compare_count').html(compareCountMsg);
        if (!$("#compare_table .same").length) {
            $(".compare_show_similar, .compare_hide_similar").hide();
        } else {
            $(".compare_show_similar, .compare_hide_similar").show();
            $(".compare_show_similar").live("click", function () {
                $('.compare_links a').removeClass('active');
                $(".compare_show_similar").addClass('active');
                $("#compare_table .same").show();
            });
            $(".compare_hide_similar").live("click", function () {
                $('.compare_links a').removeClass('active');
                $(".compare_hide_similar").addClass('active');
                $("#compare_table .same").hide();
            });
        }
        $('.compare_clear a').click(function(){
            show_preloader();
            $.cookie('compare', null);
            $('.compare-notice').slideDown();
            $('#compare_div').slideUp('fast');
            hide_preloader();
        })
        var text = '';
        console.log(products.length)
        if (products.length == 0) {
            text += '<div class="noforcompare">Нет товаров для сравнения</div>';
            $('#compare_div').html('<p>Товары для сравнения не выбраны</p><p><a href="/"  class="button" title="На главную">На главную</a></p>');
        } else {
            text += '<ol id="compare-items">'
              $(products).each(function(index,product) {
                  text += '<li class="item odd"><a href="javascript:;" rel="'+product.id+'" class="remove_compare btn-remove">удалить</a><p class="product-name"><a href="/product/?product_id='+product.id+'">'+product.title+'</a></p></li>';
              });
            text +='</ol><div class="actions"><button type="button" class="button" onclick="location.href = \'/compares\'"><span><span>Сравнить</span></span></button></div>'
        }
        $('.block-compare .block-content').html(text);   
    }
 });
}

И указываете запуск функции add_to_compare() и при запуске страницы, и при добавлении нового элемента

READ ALSO
Найти и выделить текст в Richtextbox. Не выделяется первое слово

Найти и выделить текст в Richtextbox. Не выделяется первое слово

Вот метод поиска строки в двух формах:

410
Копирование файлов в папку с ограничением в 100МБ

Копирование файлов в папку с ограничением в 100МБ

Пытаюсь скопировать (массив расширений файлов) в папку ( и в эту папку которую я копирую сделать ограничение в 100МБ), если лимит превышен файлов...

433