Good day! The client asked for the livetex form on the site to implement sending the data to the Yandex metrics goals when clicking on some of its elements. The form is connected with a JS script block in the body of the main page, i.e. HTML is generated using JS and their server. LiveTex supports the goals of Yandex so far in development, so you need to invent something yourself. I recognized the div class of these elements through Inspect Element in Mozille and wrote scripts with jQuery in the body of the main page that catch clicks on these classes — and then call yaCounterMMMM.reachGoal ('xwidget2');

However, nothing happens - jQuery doesn’t even catch events that are generated by clicking on the components of the livetex form, despite the fact that after the end of the page loading, this seems to be the same full HTML as its native. He is inspected in Mozilla!

Can I do something? LT technical support is silent.

Here is a test page where you need to debug the algorithm itself and then transfer it to the main one (for the sake of simplicity, instead of reachGoal (), they set up a banal alert): http://samurai.spb.ru/testm.html

There, a handset will pop up on the right (no need to touch the bottom shape), you need to click on it, the single-line shape will unfold (with a green handset and a green send button) to which our handler should be screwed. (Trick - the tube pops up only from 10 am to 20 in the evening, for the night of Livetex it is disconnected).

Ps. Typical handler:

$(document).ready(function() { $('.lt-xbutton-icons').click(function(){ alert('Клик по LiveTex элементу!'); return true; }); });

    1 answer 1

    If I understand you correctly, this very LiveTex generates its DOM. $(document).ready does trigger the completion of the initial DOM. Those. the moment you try to get $('.lt-xbutton-icons') they will not exist yet. Check it through

     console.log("element exist: " + !($('.lt-xbutton-icons').length === 0))

    If this is the case, then the correct solution will be hanged on a certain on-DOM-ready LiveTex callback, and if not, then on a general on-DOM-change . Or zahachit through setInterval - wait until the necessary elements appear.

    The comments also suggested using delegated events from jQuery: $(..).click(fn) is a synonym for $(".lt-xbutton-icons").on("click", fn) , and the version with delegated events looks like this : $(document).on("click", ".lt-xbutton-icons", fn) . Those. the selector moves from $ () to the on () parameter and is not checked at the time of the handler registration, but at the time of the actual click.

    The last option seems to me the most elegant, due to the exact getting to the heart of the problem. The only thing I do not know is how much overhead it has.

    • one
      If this is the case, then you can also use the delegated events from jQuery : $(..).click(fn) is a synonym for $(".lt-xbutton-icons").on("click", fn) , and option with delegated events, it looks something like this: $(document).on("click", ".lt-xbutton-icons", fn) . Those. the selector moves from $() to the on() parameter and is not checked at the time of the handler registration, but at the time of the actual click. - Nickolay
    • @Nickolay yes, it seems so too possible. Most likely it is even the best option. Thanks for the tip! - Petr Abdulin
    • "Ie, at the moment when you try to believe the $ event ('. Lt-xbutton-icons') will not exist yet" = stop, but the check in the handler is done after I clicked, because I use $ ( '.class'). click (). And I click exactly after the element has been fully formed. The moment of registration in theory should not play any role. - NDanilov2015
    • @ NDanilov2015 you click after, and the handler hangs up, not? - Petr Abdulin
    • The handler wrote in a regular way, which he works on ordinary HTML pages, i.e. $ (document) .ready (function () PS. With delegated events it worked, thank you very much! - NDanilov2015