jquery load（）动态内容不工作_Jquery_Dynamic_Load

jquery load（）动态内容不工作

jquery dynamic

jquery load（）动态内容不工作,jquery,dynamic,load,Jquery,Dynamic,Load,我有一个网站，有几个互动程序，当点击时，应该将特定内容加载到网站上的另一个div中。内容位于一个php页面上，该页面由一个“id”引用，我将该id存储在每个磁贴的“rel”属性中。例如： <div id="tile" rel="1">tile 1 preview content</div> <div id="tile" rel="2">tile 2 preview content</div> <div id="tile" rel="3">

我有一个网站，有几个互动程序，当点击时，应该将特定内容加载到网站上的另一个div中。内容位于一个php页面上，该页面由一个“id”引用，我将该id存储在每个磁贴的“rel”属性中。例如：

<div id="tile" rel="1">tile 1 preview content</div>
<div id="tile" rel="2">tile 2 preview content</div>
<div id="tile" rel="3">tile 3 preview content</div>

有人能帮我弄清楚为什么它不起作用吗？谢谢

看起来您正试图将内容加载到ID为“#projectload”的div中。代码中没有具有该ID的div。

在您的示例中，所有div都具有相同的ID。ID必须是唯一的。如果你给每个人一个唯一的id，你的代码能工作吗

<div id="tile1" rel="1">tile 1 preview content</div>
<div id="tile2" rel="2">tile 2 preview content</div>
<div id="tile3" rel="3">tile 3 preview content</div>

$('#tile1').on('click', function(){
    var projectId = $(this).attr('rel');
    $('#projectLoad').load('project.php?id='+projectId);
});

$('#tile2').on('click', function(){
    var projectId = $(this).attr('rel');
    $('#projectLoad').load('project.php?id='+projectId);
});

$('#tile3').on('click', function(){
    var projectId = $(this).attr('rel');
    $('#projectLoad').load('project.php?id='+projectId);
});

正如Palash在回答中提到的，您可以通过使用类而不是id来避免这种重复（类不必是唯一的）

tile 1预览内容
互动程序2预览内容
互动程序3预览内容
$（'.tile'）。在（'click'，function（）上{
var projectId=$（this.attr（'rel'）；
警报（'hello from div'+Projectd'）；
})

下面是一个JSFIDLE，展示了这个简单的测试-

从评论中添加的另一个独立测试

<!DOCTYPE html>
<html>

    <head>
        <title>Click Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('.div1').on('click', function () {
                    alert('Click!');
                    $('#div2').html('content');
                });
            });
        </script>
    </head>

    <body>
        <div class="div1">click me</div>
        <div id="div2"></div>
    </body>

</html>


点击测试
$（文档）.ready（函数（）{
$（'.div1'）。在（'click'，函数（）{
警报（'Click！'）；
$（'#div2'）.html（'content'）；
});
});
点击我

使用类而不是id，如下所示：

<div id="tile" rel="1">tile 1 preview content</div>
<div id="tile" rel="2">tile 2 preview content</div>
<div id="tile" rel="3">tile 3 preview content</div>

每次单击div时，您都会得到一个

projectId

，加载将起作用。

请始终尝试在HTML标记中使用唯一ID。

什么是“不工作”意思？错误？没有结果？projectLoad在哪里？你确定project.php会返回你认为是的东西吗？没有其他信息很难判断。您可以发布完整的HTML/JS以获得一个简单的示例吗？您能够在控制台中看到响应吗？ID必须是唯一的，并且您没有在上使用事件委派形式

。因此它只针对当前元素。很抱歉造成混淆，感谢您的快速帮助。当然，页面上有一个id为“projectLoad”的div（只有一个）。当我说它不工作时，它只是没有加载任何东西。我已经测试了project.php，它完全按照我的预期工作。这不起作用。我甚至添加了一个警报：警报（'Click！'）；在函数中，但我没有收到警报。您注意到我只为第一个div“tile1”添加了jQuery吗？因此，click事件将只在该一个div上触发。对于唯一的id，您需要分别为每个id添加jQuery。我将用jQuery更新其他div的答案，以避免混淆。是的，我的测试目标是tile1，正如您所做的那样。正如您在第二个示例中所做的那样，我还针对几个不同的分幅，但仍然没有警报。如果您没有收到警报，那么您没有与我们共享的其他一些代码会导致冲突。这里有一个JSFIDLE显示了测试，我目前正在寻找冲突。同时，我正在尝试一个更简单的示例：单击Test$（'.div1'）。on（'Click'，function（）{alert（'Click！'）；$（'div2'）.html（'content'）；}）；单击我这在fiddle上有效，但是当我将其保存为html并加载到浏览器中时，它不起作用。我在别的地方做错了什么，我就是看不出来。你能吗？这不管用。你有什么办法解决这个问题吗？我在函数中添加了一个警报，以测试页面是否检测到点击，但没有出现警报。
<div class="tile" rel="1">tile 1 preview content</div>
<div class="tile" rel="2">tile 2 preview content</div>
<div class="tile" rel="3">tile 3 preview content</div>

$('.tile').on('click', function(){
    var projectId = $(this).attr('rel');
    alert('hello from div ' + projectId);
})

<!DOCTYPE html>
<html>

    <head>
        <title>Click Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('.div1').on('click', function () {
                    alert('Click!');
                    $('#div2').html('content');
                });
            });
        </script>
    </head>

    <body>
        <div class="div1">click me</div>
        <div id="div2"></div>
    </body>

</html>

<div id="tile" rel="1">tile 1 preview content</div>
<div id="tile" rel="2">tile 2 preview content</div>
<div id="tile" rel="3">tile 3 preview content</div>

<div class="tile" rel="1">tile 1 preview content</div>
<div class="tile" rel="2">tile 2 preview content</div>
<div class="tile" rel="3">tile 3 preview content</div>

$('.tile').on('click', function(){
    var projectId = $(this).attr('rel');
    $('#projectLoad').load('project.php?id='+projectId);
});