Question

我有一个包含多个图块的网站，点击后，应该将特定内容加载到网站上的另一个div中。内容位于由“id”引用的php页面上，该ID存储在每个tile的“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>

这是我想要完成的jquery：

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

任何人都可以帮我弄清楚它为什么不起作用？谢谢！

Answer 1

在您的示例中，所有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);
});

注意来测试此功能，您可以尝试这个jQuery代码：

$('#tile1').on('click', function(){ alert('hello from div 1'); });
$('#tile2').on('click', function(){ alert('hello from div 2'); });
$('#tile3').on('click', function(){ alert('hello from div 3'); });

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

<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);
})

这是一个显示这个简单测试的jsFiddle - http://jsfiddle.net/RHXGS/

从评论

添加另一个自包含的测试

<!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>

Answer 2

使用class而不是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 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>

和js代码如下：

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

每次点击div时你都会得到一个projectId，并且加载会起作用请始终尝试在HTML标记中使用唯一ID。

Answer 3

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

jquery load（）动态内容不起作用

3 个答案: