[RESOLVED] how to click the appended li ?

hi
i want to click the appended <li>

i append a <li> into <ul>

and now i want to click them but it's don't work fine

here is my append code JQ :

Code:

---

$('li').append($('<p>').text(post.w_name).attr('name','post_'+post.w_id).attr('id','post_'+post.w_id).addClass('f_ok'));

---

and here my html code :

Code:

---

<ul dir="rtl">
    <li><h1>Online</h1></li>
</ul>

---

i want to do this :

Code:

---

            $('li p').click(function(){
                alert($(this).text())
            });

---

it's don't work with me :( help

and thanks

When you assign a callback function using .click(function(){}), it can only be assigned to currently-existing DOM elements. If your append() is occurring after the assignment, it won't work that way.

There are at least two ways of dealing with this. One is to use the .on() function, which can assign callbacks for elements that will exist in the future. The other approach is to specifically attach the callback to your <p> element when you're creating it:

Code:

---

var newPara = $('<p></p>');
newPara.text(post.w_name)
        .attr('name','post_'+post.w_id)
        .attr('id','post_'+post.w_id)
        .addClass('f_ok')
        .click(function(){
                alert($(this).text())
        });
$('li').append(newPara);

---

This is a good approach if you want the callback to be assigned specifically to just that element.

thanks for helping me ;)