selecting dom elements after html was inserted in a page with ajax

前端 未结 2 1200
野趣味
野趣味 2020-12-30 10:31

I created an ajax tab navigation with html being inserted into the page. the code looks like this:

$.ajax({
        type: \'POST\',
        url: \'main/ajaxj         


        
相关标签:
2条回答
  • 2020-12-30 10:40

    Use delegate event like on for version 1.7+

    $('body').on('change', '#chapters-select', function(){
        alert('changed');
    });
    

    To increase performance instead of body you should write the closest static(Not added dynamic with ajax or javascript) element that holds "chapters-select

    If you are using older version of jQuery choose the appropriate method with the following table:

    $(selector).live(events, data, handler);                // jQuery 1.3+  
    $(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+  
    $(document).on(events, selector, data, handler);        // jQuery 1.7+  
    

    on docs:

    When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

    Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. Or, use delegated events to attach an event handler, as described next.

    0 讨论(0)
  • 2020-12-30 10:55

    Run this once, after the page's first load.

    $("body").delegate('#chapters-select','change', function(){
        alert('changed');
    });
    

    It's equivalent to @gdoron's answer, but is compatible with versions of jQuery older than 1.7

    0 讨论(0)
提交回复
热议问题