how to run jquery code, after data load

Question

I try to run js code after data load it work's conversely now first it's run code, before load data, and delete class .active, I need delete class after click on another link

here is my code:

 $('document').ready(function() {
            $('.links a').click(function(e) {
                e.preventDefault();
                $('.links a').not(this).removeClass('active');
                $(this).addClass('active');
            });
        });
        function Animate2id(id) {
            // your function stuff
        }

and my html:

<div class ="links">
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4610?>'); return false;" class="" title="Мобильные телефоны">Мобильные телефоны</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4611?>'); return false;" class="" title="Планшеты">Планшеты</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4616?>'); return false;" class="" title="Монопады">Монопады</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4630?>'); return false;" class="" title="Наушники">Наушники</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4739?>'); return false;" class="" title="Медиаплееры">Медиаплееры</a>
        <a id="section-<?=$arParams['CODE']?>-link" href="#" onclick="ajax_load('#no-scroll-items-<?=$arParams['CODE'];?>', '<?=$arResult['AJAX_CALL_ID']?>', 'do=select_section&id=<?=4593?>'); return false;" class="" title="Аксессуары">Аксессуары</a>
    </div>

what I missing? best regards

Try event delegation .... http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Arun P Johny, Jul 14 '15 at 06:46
Possible duplicate of http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Arun P Johny, Jul 14 '15 at 06:46

score 0 · Answer 1 · answered Jul 14 '15 at 07:02

0

Try this:

$('document').ready(function() {
   $('.links a').on('click', function(){
      $('.links a').removeClass('active');
      $(this).addClass('active');
   });
});

live demo: codepen

answered Jul 14 '15 at 07:02

Abdullah Al Shakib

2,034
2
15
16

thank's, but I have the same trouble, after data load, it delete class .active – front-end_junior Jul 14 '15 at 07:08

Karan Singh · Answer 2 · 2015-07-14T09:04:33.553

0

$(document).ready(function() {
     // executes when HTML-Document is loaded and DOM is ready
     alert("document is ready");
    });


    $(window).load(function() {
     // executes when complete page is fully loaded, including all frames, objects and images
     alert("window is loaded");
    });

otherwise use settimeout

setTimeout(function(){ alert("call after 3000 mili sec"); }, 3000);

edited Jul 14 '15 at 09:04

answered Jul 14 '15 at 08:58

Karan Singh

876
1
6
12

Hello, Karan. Would you mind taking a look to this question w/bounty on it? https://stackoverflow.com/questions/47609994/jquery-how-to-pre-load-info-into-the-dom – Luis Alberto Delgado de la Flo Dec 04 '17 at 19:48

how to run jquery code, after data load

2 Answers2