jQuery - Javascript in Response

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

James Allardice · Accepted Answer · 2011-10-09 22:04:35Z

2

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.

answered Oct 9, 2011 at 22:04

James Allardice

166k22 gold badges335 silver badges315 bronze badges

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

4 Comments

James Allardice Over a year ago

No problem, glad I could be of help :)

Skylineman Over a year ago

Hello again. I've got again a problem. Could you help me about it too? pastebay.com/140796 Thanks!

James Allardice Over a year ago

I'm not sure what you mean by "AJAX doesn't show any answer". I would suggest posting a new question with your new problem.

Skylineman Over a year ago

It doesn't do what I wrote to the success section.

Collectives™ on Stack Overflow

jQuery - Javascript in Response

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related