jQuery Ui Tabs cannot handle onclick in loaded document

Question

I have jQuery Ui tabs like this

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="ajax/content1.php">Tab 1</a></li>
        <li><a href="ajax/content2.php">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">

    </div>
</div>

in the JavaScript I have

$(document).ready(function() {
    $( "#moreinfotabs" ).tabs();
    $('a').click(function(){
        alert("asdas");
    });

When content1.php for example is loaded, I want to handle click on the links in content1.php and to alert something but It's not happen. How to do that ?

PS: I wrote for a link, whatever I want to use with a.classname....

Ram · Accepted Answer · 2012-10-29 00:35:02Z

1

For dynamically generated elements, events should be delegated, from one of static parents of the element, or document object.

$(document).on('click', 'a', function(){
    alert("asdas");
});

Please note that you haven't closed the document ready handler:

$(document).ready(function() {
    $( "#moreinfotabs" ).tabs();
    $(document).on('click', 'a', function(){
        alert("asdas");
    });
}) // <--

edited Oct 29, 2012 at 0:35

answered Oct 29, 2012 at 0:25

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tats_innit Over a year ago

+ 1 and just minor observation: the OP forgot to close }); in his/her document.ready :)

Ram Over a year ago

@Tats_innit Thanks bro, yes, I forgot to mention that :)

Collectives™ on Stack Overflow

jQuery Ui Tabs cannot handle onclick in loaded document

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related