1

我一直在尝试将链接的内容加载到 div 元素而不重新加载页面。我找到了这个解决方案“http://wecodesign.com/demos/stackoverflow-7071545.htm”并尝试过，但我无法让它工作。

我正在做的完全一样，但由于某种原因它不起作用。

这是 Jquery 部分：

<script type="text/javascript">

    function updateContainer( url ){
        dynamicCon = '#mainContent';    
        ObjTag = $( dynamicCon );
        ObjTag.load( url );
    }
    $( document ).ready( function() {
        $( 'a[rel="dynamicLoad"]' ).bind( "click", function( event ) {
            url = $( this ).attr( 'href' );
            updateContainer( url );
            event.preventDefault();
            event.stopPropagation();
        });
    });
</script>

这是我用来输出 HTML 的 PHP 位：

echo '<li><a href = "/getPost.php?q='. $row['id'] .' " rel="dynamicLoad" >'. $row['title'] .'</a> </li> <br>';

但这会将我发送到链接而不是将其加载到 div 中。我希望内容加载到的 div 称为“mainContent”。现在，我不能说我知道 JQuery，但对我来说一切看起来都不错，但显然我错过了一些东西。

更新：我尝试链接到以后的库，重新启动服务器，清除浏览器缓存并将 Javascript 更改为：

        function updateContainer( url ){
            dynamicCon = '#mainContent';    
            ObjTag = $( dynamicCon );
            $("#mainContent").load(url)
        }
        $( document ).ready( function() {
            $( 'a[rel="dynamicLoad"]' ).bind( "click", function( event ) {
                url = $( this ).attr( 'href' );
                updateContainer( url );
                event.preventDefault();
                event.stopPropagation();
            });
        });

现在，当我尝试加载链接时，mainContent div 变为空（考虑到这种情况肯定是一种改进）

更新2：如果您想四处逛逛，我将其上传到网上。电动布朗尼网

4

3 回答 3

1

答案很简单。在您生成的网址中删除尾随空格，它将起作用:)

echo '<li><a href = "/getPost.php?q='. $row['id'] .'" rel="dynamicLoad" >'. $row['title'] .'</a> </li> <br>';

应该<a href = "/getPost.php?q='. $row['id'] .' "是<a href = "/getPost.php?q='. $row['id'] .'"

于 2012-07-25T18:29:02.007 回答
0

我很确定这是因为<a>元素的默认功能是将您发送到href属性。试试这个看看它是否有效：

<script type="text/javascript">

    $( document ).ready( function() {
        $( 'a[rel="dynamicLoad"]' ).each(function(index){
            $(this).click(function(){
                url = '/getPost.php?q='+$(this).attr('id');
                $('#mainContent').load(url);
            });
        });
    });
</script>

<?php
...
    echo '<li><a id="'.$row['id'].'" href = "#" rel="dynamicLoad" >'. $row['title'] .'</a> </li> <br>';
?>
于 2012-07-25T15:22:12.723 回答
0 
   $( 'a[rel="dynamicLoad"]' ).bind( "click", function( event ) {
        var url = $( this ).attr( 'href' );
        $.get(url, function(data) {
            $('#mainContent').html( data);             
        }):
        event.preventDefault();
    });
于 2012-07-25T15:28:35.920 回答