开发者

jQuery - Javascript in Response

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


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜