How to bind a function when a specific tag appears in the page?

Question

I have in my form a textarea where some links are stored via the method val():

<li classs="0"><a href="link">Description</a></li>

The textarea should be hidden and I add these links from some other inputs (Link + Description)

For the user to know what he added, I display these links in an unordered list:

            <ul id="sources_display">
                <li class="0"><a href="link">Description</a></li>
                <li class="1"><a href="link">Description</a></li>
                <li class="2"><a href="link">Description</a></li>
            </ul>

Now I would like to have a remove_link button, which could be as:

            <ul id="sources_display">
                <li class="0"><a href="link">Description</a><a href="link">Remove Link</a></li>
                <li class="1"><a href="link">Description</a><a href="link">Remove Link</a></li>
                <li class="2"><a href="link">Description</a><a href="link">Remove Link</a></li>
            </ul>

I could do that. But I would like to be able to add this remove link button each time a new link is displayed in the <ul id="sources_display">. I would like to use something like live() method.

With other words, do you think it's possible to call a function when something like $("ul#sources_display li") is displayed during the load of the page or via AJAX request?

THX guys!

You have to manually trigger an event or call a function which will add the required element. There is no such event exists.. — ShankarSangoli, Feb 07 '12 at 18:14
Class names cannot start with numbers either. See: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names — Diodeus - James MacFarlane, Feb 07 '12 at 18:15
To answer your question ("Do you think it's possible to call a function when something like $("ul#sources_display li") is displayed during the load of the page or via AJAX request?"), the answer is yes. — j08691, Feb 07 '12 at 18:22
Thx for help, sorry for late answer I changed flat and didn't spend much time on internet. Look at my answer if you want to know how I managed. — Bachet, Feb 16 '12 at 11:27

score 0 · Accepted Answer · answered Feb 16 '12 at 11:35

I'll write here how I did with rails.

To be able to add a remove button on the page load, I called a function directly from my show.html.erb:

            <script type="text/javascript">
                $(document).ready(function() {
                    add_source_links();
                });

            </script>

and to be able to add the remove button on the Ajax content load, I call the function from the the corresponding js.erb file this way:

            add_source_links();

My function is stored in the application.js file.

Thx for help!

How to bind a function when a specific tag appears in the page?

1 Answers1