Question

我有一个这样的页面：

<html>
<head>
    <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="jqtouch.js"></script>
    <script language="javascript" type="text/javascript" src="myfunctions.js"></script>

    [...]

</head>

<body>
    [...]
    <div id="jqt">
    <div id="home" class="current">
        <div class="toolbar">
            TITLE
        </div>
        <div class="s-scrollwrapper">
            <div class="content">
                <div class="container" >
                    <a href="/thepage.php">LOAD ME 1</a><a href="/thepage.php">LOAD ME 2</a>
                </div>
            </div>
        </div>
    </div>
    </div>
    [...]
</body>

加载页面的内容是这样的，例如：

<div id="AG3456AF002347634">
<div class="toolbar">
TITLE 1
</div>
<div class="s-scrollwrapper">
    <div class="content">
        <div class="container" >
            <div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
        </div>
    </div>
</div>
</div>

showItem是一个位于myfunctions.js中的函数，内容如下：

function showItem() {jQuery(jQT.hist[0].hash + ' #myItemId').show();}

所以当我点击按钮时，页面加载后，jQT.hist [0] .hash值为＃AG3456AFGG2347634。这是第一次使用AJAX加载页面时工作正常（好吧，当jQTouch这样做时）。但是，如果我加载另一个页面具有相同的内容（但主要标识符是不同的）它不起作用。在两个AJAX调用之后，页面dom与此类似：

<html>
<head>
    <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="jqtouch.js"></script>
    <script language="javascript" type="text/javascript" src="myfunctions.js"></script>

    [...]

</head>

<body>
    [...]
    <div id="jqt">
        <div id="home">
            <div class="toolbar">
                TITLE
            </div>
            <div class="s-scrollwrapper">
                <div class="content">
                    <div class="container" >
                        <a href="/thepage.php">LOAD ME 1</a><a href="/thepage.php">LOAD ME 2</a>
                    </div>
                </div>
            </div>
        </div>

        <div id="AG3456AF002347634">
            <div class="toolbar">
                TITLE 1
            </div>
            <div class="s-scrollwrapper">
                <div class="content">
                    <div class="container" >
                        <div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
                    </div>
                </div>
            </div>
        </div>

        <div id="FC00A83473BE33457" class="current">
            <div class="toolbar">
                TITLE 2
            </div>
            <div class="s-scrollwrapper">
                <div class="content">
                    <div class="container" >
                        <div style="display:none" id="myItemId"></div><button onclick="javascript: showItem();"/>
                    </div>
                </div>
            </div>
        </div>

    </div>
    [...]
</body>

所以当我点击第二个加载页面上的按钮时它不起作用导致jQuery找不到该项目。 jQT.hist [0] .hash的值是正确的，即＃FC00A83473BE33457。项目ID #myItemId在两个页面上都是相同的，这就是使用它唯一的包装器div ID来查找每个已加载项目的原因。

为什么这会在第一页上工作，但是当我将其他页面加载到DOM中时却不是这样？

Answer 1

你必须在jQuery中使用“live”命令来动态加载内容。将一个类传递给你的按钮（如.myButton）和你的div容器（.container）并使用：

$('.myButton').live('click', function(){
    //and scope from $(this) here
    $(this).parents().find('.container:first').attr('id');
});

Answer 2

我建议使用jQuery .on（）方法而不是live，这是一种较新的方法（live有一些问题），请阅读：http://api.jquery.com/on/

对于传递参数，您可以向单击的元素添加属性，或者使用参数从.on（）回调内部调用函数，或者甚至做一点（丑陋）黑客并使用.on作为'load' （或“准备好”）事件而不是“点击”并添加onclick（如果没有其他方式）。类似的东西：

$(".myButton").on("load", function(event){
  $(this).attr('onclick' , yourFunction)
});

但是你可能只需要.on（）就可以让它以更干净的方式工作。

Answer 3

ID是单数的，你不能在页面上有多个具有相同值的id。

将id更改为类并以这种方式引用它。

jQuery没有找到用AJAX加载的元素

3 个答案: