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

时间:2012-04-07 16:35:25

标签: jquery

我找到了refresh dynamic php div using jquery的问题/答案。 AlexTJ.回答了这个问题。两次方法对我有用!但是当我将div加载到我的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('-');
    }
}); 

1 个答案:

答案 0 :(得分:0)

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

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