AJAX调用后的jQuery引用

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

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

但出于某种原因，它不起作用。 在你说什么之前，是的，我仔细检查了类名，它们是存在的

这是完整的代码：

    <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>

$（文档）.ready（函数（）{
$（'#messagesLink'）。单击（函数（）{
$（'#wrapper'）.fadeTo（'slow'，0.5，function（）{
$（'#messageBox'）.fadeIn（）；
});
});
$（'#exitLink'）。单击（函数（）{
$（'#messageBox'）。淡出（函数（）{
$（'#wrapper'）.fadeTo（'slow'，1）；
});
});
$（'#goBackLink'）。单击（函数（）{
$（'.msgboxconversation'）.slideUp（'slow'，函数（）{
$（'.msgBoxContent'）.slideDown（'slow'）；
});
});
$（'.msgBoxContent p'）。单击（函数（）{
$.ajax({
键入：“POST”，
url:“../core/ajax_handler.php”，
数据：({
ajaxHook:'getMessageReplies'，
messageID:$（this.attr（'class'））
}),
成功：功能（messageLayout）{
var message=$.parseJSON（messageLayout）；
$（'.msgBoxContent'）.slideUp（'slow'，function（））{
$（'.msgboxconversation'）.html（message.repress）.slideDown（'slow'）；
});
$（'.msgBoxHeader'）.html（message.title）；
}
});
});
});
[#LANG：：X_MSGS_FROM_X-#]
[#-数据：：获取用户消息-#]

---

再次感谢：）

这是从ajax调用的响应加载的，这意味着在加载窗口之后。因此，您应该在事件处理程序上使用

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

这是从ajax调用的响应加载的，这意味着在加载窗口之后。因此，您应该在事件处理程序上使用

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

使用
单击
或
绑定
静态写入的单击处理程序将不会拾取动态添加的内容。您需要在
上使用
来完成此操作

$(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'); 
     });
});

使用
单击
或
绑定
静态写入的单击处理程序将不会拾取动态添加的内容。您需要在
上使用
来完成此操作

$(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'); 
     });
});

您正在将单击事件添加到
#goBackLink
之前，因此不会发生任何事情。在主体上使用jQuery的
on（）
函数。像这样：

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

您正在将单击事件添加到
#goBackLink
之前，因此不会发生任何事情。在主体上使用jQuery的
on（）
函数。像这样：

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

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

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

根据定义，live（）方法将“为所有与当前选择器相匹配的元素附加一个事件处理程序，现在和将来”，因此，在成功调用ajax后替换#goBackLink元素时，这应该起作用。
尝试使用live（）方法绑定事件，而不是单击。如下

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

根据定义，live（）方法将“为所有与当前选择器相匹配的元素附加一个事件处理程序，现在和将来”，因此在成功调用ajax后替换#goBackLink元素时，这应该会起作用。
这不会起作用，因为
#goBackLink
还不存在。您必须将事件委托给DOM树上更高的元素。这不起作用，因为
#goBackLink
尚不存在。您必须将事件委托给DOM树上更高的元素。谢谢，伙计，我曾考虑过使用“on”函数，但我不确定如何使用。你太棒了+1为正确答案，也为指出我的错误而不投反对票。：）@dku.rajkumar-当然可以：）请随意更正您的答案-这不是剽窃，只是确保新访问者在浏览时不会看到不正确的东西。谢谢，伙计，我考虑过使用“开启”功能，但我不确定如何使用。你太棒了+1为正确答案，也为指出我的错误而不投反对票。：）@dku.rajkumar-当然可以：）请随意更正您的答案-这不是剽窃，只是确保新访问者在浏览这里时不会看到不正确的东西