Question

在AJAX调用之后我得到了一个HTML：

This is a new Title <a href="javascript:void(0);" id="goBackLink"><img src="../images/go-back.png" /></a>

我写了这段代码：

$('#goBackLink').click(function() {
            $('.msgBoxConverstion').slideUp('slow', function (){
                $('.msgBoxContent').slideDown('slow'); 
            });
        });

但是由于某些原因它不起作用。在你说什么之前，是的，我仔细检查了班级名称，他们是存在的。

这是完整的代码：

    <script type="text/javascript">
    $(document).ready(function () {
        $('#messagesLink').click(function() {
            $('#wrapper').fadeTo('slow', 0.5, function (){
                $('#messageBox').fadeIn();
            });
        });

        $('#exitLink').click(function() {
            $('#messageBox').fadeOut(function (){
                $('#wrapper').fadeTo('slow', 1); 
            });
        });

        $('#goBackLink').click(function() {
            $('.msgBoxConverstion').slideUp('slow', function (){
                $('.msgBoxContent').slideDown('slow'); 
            });
        });

        $('.msgBoxContent p').click(function (){
            $.ajax({
                type: 'POST',
                url: '../core/ajax_handler.php',
                data: ({
                    ajaxHook: 'getMessageReplies',
                    messageID: $(this).attr('class')
                }),
                success: function ( messageLayout ){
                    var message = $.parseJSON( messageLayout );
                    $('.msgBoxContent').slideUp('slow', function() {
                        $('.msgBoxConverstion').html( message.replies ).slideDown('slow');
                    });
                    $('.msgBoxHeader').html( message.title );
                }
            });
        });
    });
</script>
<div id="messageBox">
    <div class="msgBoxHeader">
        <a href="javascript:void(0);" id="exitLink"><img src="../images/cross.png" /></a>
        [#-LANG::X_MSGS_FROM_X-#]
    </div>
    <div class="msgBoxContent">
        [#-DATA::GET_USER_MESSAGES-#]
    </div>
    <div class="msgBoxConverstion">

    </div>
    <div class="msgBoxBottom"></div>
</div>

再次感谢：）

Answer 1

使用click或bind的静态书面点击处理程序无法获取动态添加的内容。您需要使用on来完成此操作。

$(document).on("click", '#goBackLink', function() {
     $('.msgBoxConverstion').slideUp('slow', function (){
          $('.msgBoxContent').slideDown('slow'); 
     });
});

请注意，这会听取您网页上任何地方的所有点击。理想情况下，如果您确信此goBackLink锚将始终添加到某个容器内，例如，名为foo的div，则只需听取foo上的点击

$('#foo').on("click", '#goBackLink', function() {
     $('.msgBoxConverstion').slideUp('slow', function (){
           $('.msgBoxContent').slideDown('slow'); 
     });
});

Answer 2

您在点击事件存在之前将其添加到#goBackLink，因此不会发生任何事情。在正文上使用jQuery的on()函数。像这样：

$('body').on('click', '#goBackLink'), function() {
    $('.msgBoxConverstion').slideUp('slow', function (){
        $('.msgBoxContent').slideDown('slow'); 
    });
});

Answer 3

这是你从ajax调用的响应中加载的，这意味着在加载窗口之后。所以你应该使用on事件处理程序。

$('body').on('click','#goBackLink',function() {
      $('.msgBoxConverstion').slideUp('slow', function (){
            $('.msgBoxContent').slideDown('slow'); 
       });
});

Answer 4

尝试使用live（）方法绑定事件而不是单击。如下所示

$('#goBackLink').live('click',function() {
    $('.msgBoxConverstion').slideUp('slow', function (){
        $('.msgBoxContent').slideDown('slow');
    });
});

根据定义，live（）方法将“为与当前选择器匹配的所有元素附加事件处理程序，现在和将来”。因此，在成功调用ajax后替换 #goBackLink 元素时，这应该有效。

AJAX调用后的jQuery引用

4 个答案: