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

【问题标题】：jQuery is not finding elements loaded with AJAXjQuery 没有找到使用 AJAX 加载的元素
【发布时间】：2012-03-17 13:06:17
【问题描述】：

我有一个这样的页面：

<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 时却不起作用？？

【问题讨论】：

标签： javascript jquery ajax jqtouch

【解决方案1】：

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

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

【讨论】：

但我需要调用位于 myfunctions.js 中的函数以避免一次又一次地加载相同的 javascript 函数。我不确定你的代码是否理解......我在 live 函数中添加了什么？
问题是如何使用 jQuery 从我的函数中找到新加载的项目，该函数位于 myfunctions.js 中，它一直在加载。
如果你将该函数放在 document.ready 中，它将在所有脚本中可用。该函数说：对于 myButton 类的所有实例，当我单击它时，找到具有容器类的父 div。如果您愿意，您也可以将该函数嵌入到加载的类中。
但我的情况有点复杂，以前我使用每个按钮的 onclick 将参数传递给我的函数。该参数是必需的，因为我在函数中使用它来调用 jQuery.post('page.php?param=' + functionParameter, function(data) { ... });
使用您的方法，使用实时 jQuery 函数，我无法将任何参数传递给函数

【解决方案2】：

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

至于传递参数，您可以为单击的元素添加一个属性，或者使用参数从 .on() 回调内部调用您的函数，或者甚至做一些（丑陋的）hack 并使用 .on 来“加载” （或'ready'）事件而不是'click'并添加onclick（如果真的没有其他方法）。比如：

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

但您可能只需使用 .on() 就可以使其以更简洁的方式工作。

【讨论】：

【解决方案3】：

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

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

【讨论】：

问题不是 ids，问题是 jQuery 没有看到新加载的元素，即使它的 id 是唯一的（如
）。主 div 中有重复的 id，但第一个 id 是唯一的，所以结合它们应该可以解决问题...
没关系，id 是 SINGULAR。 HTML5 Spec