Question

我一直在尝试将链接的内容加载到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：如果你想要四处寻找，我上传了这个东西。 electricbrownie.net

Answer 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'] .'"

Answer 2

我很确定这是因为<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>';
?>

Answer 3

   $( 'a[rel="dynamicLoad"]' ).bind( "click", function( event ) {
        var url = $( this ).attr( 'href' );
        $.get(url, function(data) {
            $('#mainContent').html( data);             
        }):
        event.preventDefault();
    });

将PHP脚本的结果从与JQuery的链接加载到div中

3 个答案: