jquery代码在将外部页面加载到div时工作

Question

我为refresh dynamic php div using jquery 找到了这个问题/答案。 Alex 和 TJ. 回答了这个问题。两次方法对我有用！但是当我将外部页面加载到我的 div 我的 jquery 库和其他 jquery 代码对我不起作用时我遇到了大问题:(。我需要解决这个问题。

示例加载 1：

    $(document).ready(function () {
        $('.click').on('click', function (e) {
            e.preventDefault();
            $('.messagelist').html('Please wait...');
            $.ajax({
                type : 'GET',
                url : 'messages.php',
                dataType : 'html',
                success : function (response) {
                    $('.messagelist').html(response);    
                }
            });
        });
    });
 <a class="click" href="#"> Link TO refresh Div </a>
 <div class="messagelist">
 <div class="togglespan"><span>+</span></div>
 <div class="togglediv"></div>
 </div>

加载 2：

    <script type="text/javascript">
    $(function(){
        $('.click').on('click', function(e){
            e.preventDefault();
            $('.messagelist').text('Please wait...');
            $('.messagelist').load('list.php');
        });
    });
    </script>
    <a class="click" href="#"> Link TO refresh Div </a>
    <div class="messagelist">
    <div class="togglespan"><span>+</span></div>
    <div class="togglediv"></div>
    </div>

例如，现在我的页面中有用于切换 div 的代码。这不起作用。真的在我的外部页面中，我需要切换 div。如何修复工作 jquery 库的加载外部页面和所有外部页面的代码？有一个基本的方法可以做到这一点。谢谢

$(".togglespan").click(function () {
    if ($(this).next(".togglediv").is(":hidden")) {
        $(this).next(".togglediv").slideDown("slow");
        $(this).children('span').html('+');
    } else {
        $(this).next(".togglediv").slideUp("slow");
        $(this).children('span').html('-');
    }
}); 

Answer 1

您需要事件委托。试试这个而不是你的切换代码：

$(".messagelist").on('click', '.togglespan', function (e){
    if ($(this).next(".togglediv").is(":hidden")) {
        $(this).next(".togglediv").slideDown("slow");
        $(this).children('span').html('+');
    } else {
        $(this).next(".togglediv").slideUp("slow");
        $(this).children('span').html('-');
    }
});