Question

I’ve got some problem with using jQuery

HTML

<div class="dnone team_data" id="team_<?php echo $allnum; ?>" style="padding: 10px; margin: 2px 0 2px 0; border: 1px solid <?php echo $site_color; ?>;">
<div class="ajax-json-loading"></div>
<div class="ajax-json-response"></div>
<table cellspacing="5">
    <tr>
        <td valign="top" style="width: 100px;">
            <b>Csapat vezető:</b>
        </td>
        <td class="team-leader-area">
            <input type="hidden" class="team-leader-hidden-id" value="<?php echo $value['leader']; ?>" />
            <div class="team-leader-id"><a href="http://lanseries.hu/index.php?oldal=profile&p_id=<?php echo $value['leader']; ?>" target="_blank"><?php echo $value['leader']; ?></a></div>
            <div class="team-leader-modify"><a href="javascript:void(0);">Módosít</a></div>
        </td>
    </tr>
    <tr>
        <td valign="top" style="width: 100px;">
            <b>Befizető címe:</b>
        </td>
        <td>
            <?php echo $value['p_address']; ?>
        </td>
    </tr>
</table></div>

And the jQuery

$(document).ready(function() {
$('.team-leader-modify a').click(function(){
    var action = $(this).text();
    if (action == 'Módosít') { //Option 1
        var value = $(this).parents('.team_data').find('.team-leader-hidden-id').val();
        $(this).parents('.team_data').find('.team-leader-id').html('<input type="text" name="leader-id" class="leader-id" value="'+value+'" /><input type="button" name="team-leader-mod-button" class="team-leader-mod-button" value="módosít" />');
        $(this).parents('.team_data').find('.team-leader-modify').html('<a href="javascript:void(0)">Mégse</a>');
    }
    if (action == 'Mégse') { //Option 2
        var value = $(this).parents('.team_data').find('.team-leader-hidden-id').val();
        $(this).parents('.team_data').find('.team-leader-id').html('<a href="http://lanseries.hu/index.php?oldal=profile&p_id='+value+'" target="_blank">'+value+'</a>');
        $(this).parents('.team_data').find('.team-leader-modify').html('<a href="javascript:void(0)">Módosít</a>');
    }
}); });

After I click the a after DOM loaded it shows the option 1 correctly, but after I click the a in the option 1 it doesn’t show up the option 2.

Could you help me?

Thanks: Marcell

Answer 1

If I’ve understood you correctly, the problem is that you’re inserting a new element into the DOM, so the click event handler won’t be attached to it. You can use jQuery’s live or delegate methods to attach an event handler to existing elements, and those added in the future:

$('.team-leader-modify a').live("click", function(){
    //Your function
});

Or, with delegate:

$('.team-leader-modify').delegate("a", "click", function(){
    //Your function
});

I would suggest using delegate, which offers better performance because jQuery doesn’t have to monitor the entire DOM for new elements, just the selected element.