Блог

У меня возникла некоторая проблема с использованием 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=profileamp;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>
  

И 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=profileamp;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>');
    }
}); });
  

После того, как я нажимаю a после загрузки DOM, он показывает option 1 правильно, но после того, как я нажимаю a в option 1 , он не отображается option 2 .

Не могли бы вы мне помочь?

Спасибо: Марселл

Если я вас правильно понял, проблема в том, что вы вставляете новый элемент в DOM, поэтому click обработчик событий не будет к нему привязан. Вы можете использовать методы jQuery live или delegate , чтобы прикрепить обработчик событий к существующим элементам и к тем, которые будут добавлены в будущем:

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

Или, с delegate :

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

Я бы предложил использовать delegate , который обеспечивает лучшую производительность, потому что jQuery не нужно отслеживать весь DOM для новых элементов, только выбранный элемент.