使用 AJAX 和 PHP 将 php 文件加载到 div 中的点击事件？答案

【问题标题】：Making on click event work with AJAX & PHP loading php files into div?使用 AJAX 和 PHP 将 php 文件加载到 div 中的点击事件？
【发布时间】：2013-03-10 12:16:56
【问题描述】：

目前我有此代码用于将文件加载到 div 中。当我点击其中一个选项时，它只是链接到页面，而不是使用 AJAX 将页面加载到 div 中。

$(document).ready(function(){
  $('.eventSelect').click(function(){
    var url = 'includes/events.php';
    $('.content').load(url); 
  });
});   

$(document).ready(function(){
  $('.podSelect').click(function(){
    //Retrieve Content from the back-end PHP page, and pass the ID selected
    var url = 'includes/content.php';
    $('.content').load(url); 
  });
});

这是带有两个可单击选项的代码。因此，如果我单击 pod，则 pod 的内容将出现在 div 类（内容）中，事件也是如此。

echo "<div id=\"viewSelect\">";
echo "<div class=\"eventSelect\">";
echo "<a href=\"/../includes/events.php\">";
echo "events";
echo "</a>";
echo "</div>";
echo "<div class=\"podSelect\">";
echo "<a href=\"/../includes/events.php\">";
echo "pods";
echo "</a>";
echo "</div>";
echo "</div>";

我认为我的问题与 href 有关，但我不确定。

如果有人能提供帮助，那就太好了，谢谢。

【问题讨论】：

我已经尝试完全删除href，但没有什么可点击的，是否确定我需要将jquery与href链接链接？
把return false;放在$('.content').load(url);之后

标签： php html ajax jquery

【解决方案1】：

我认为您需要从单击处理程序中返回 false 以防止默认行为。

【讨论】：

【解决方案2】：

只需将你的 JS 更改为跟随

 $(document).ready(function(){
      $('#viewSelect > a').click(function(){
        var url = $(this).attr('href');
        $('.content').load(url);
        return false; 
      });
    });

上面发生了什么
$(document).ready();

$('#viewSelect > a').click(); viewSelect id 内的所有anchor 标签绑定到click 事件

$(this).attr('href'); anchor href 属性

return false;

一些建议

您不需要重复相同的功能两次。这可以是仅通过单一功能实现。
另外，我看不出您有任何理由在 php echo 语句中包含普通的 HTML。这对服务器来说只是不必要的开销。
正确阅读jQuery documentation ，不要启动 $(document).ready() 每次编写新函数时。

【讨论】：

【解决方案3】：

尝试删除<a>标签

echo "<div id=\"viewSelect\">";
echo "<div class=\"eventSelect\">";
echo "events";
echo "</div>";

【讨论】：

我已经这样做了，但是我无法将鼠标悬停在事件上并单击，所以这不起作用。
您是否尝试过使用 chrome 开发人员工具查看该页面？还是萤火虫？它在那里显示什么？并尝试用“#”替换您的链接

【解决方案4】：

你听说过 jquery 兄弟吗？...试试 jquery，这将解决你的问题。

function loadAjax(url,display)
{ $("."+display).html('Loading Content Please Wait...'); 
$.get(url,function(data){  $("."+display).html(data) }); }

现在参数是

 url=ajax feed to load (eg. includes/events.php)
    display = where to show your feed result. (eg. content)

这样使用

<div class="content"></div> 
<a Onclick='loadAjax("includes/events.php","content")'>Click To Load Events</a>
<a Onclick='loadAjax("includes/contents.php","content")'>Click To Load Events</a>

显然，您需要 jquery 库才能使其工作。

【讨论】：