Question

I have a problem with this Jquery function.
The the simplifide code looks like:

$(document).ready(function(){

    $(".brs").toggle(function() {
        var commid=$(this).attr('kid');
        $('.comment'+commid).html('the new text - <a href="javascript: void(0)"  class="brs2" kid="'+ commid +'">click to change the text</a>');
    }, function () {
        var commid=$(this).attr('kid');
        $('.comment'+commid).html('new text');
    });

    $(".brs2").click(function() {
        alert("test"); 
    });

});

HTML code:

<div class="comment1">some text</div> | <a href="javascript: void(0)"  class="brs" kid="1">test link</a>

When the text changes in the div “comment1” the link that runs another function (class “brs2”) does not work. What could be the problem?

Thanks for all sugestions.

EDIT:

If the Jquery code looks like:

$(document).ready(function(){
$(".brs").toggle(function() {
var commid=$(this).attr('kid');
$('.comment'+commid).html('the new text - <a href="javascript: void(0)"  class="brs" kid="'+ commid +'">click to change the text</a>');
}, function () {
var commid=$(this).attr('kid');
$('.comment'+commid).html('new text');
});

$(".brs2").click(function() {
alert("test"); 
});

});

And the HTML:

<div class="comment1">some text</div> | <a href="javascript: void(0)"  class="brs" kid="1">test link</a>

I can’t use live() to trigger the same toggle function with new link that appears in comment1 div?

Answer 1

use live instead of click because you are dynamically inserting the link in the DOM

$(".brs2").live('click',function() {
alert("test");
});

here is the fiddle http://jsfiddle.net/7E8aG/1/

here is a link to jquery live http://api.jquery.com/live/

Edit

if i have understood well may be you can do it like

$(".brs2").live('click',function() {
    if($(this).is(':visible'))
    {
        $(this).fadeOut("slow");
        $("div.comment1").html("new text");
    }    
});

http://jsfiddle.net/7E8aG/2/