Question

我正在动态创建一些div元素（行）。每一行都具有相同的基本格式，只有文本更改。由于行结构很复杂，我试图从静态html文件加载“基本”div，然后加载后，用每行的参数调整一些属性。（像Android的xml定义的适配器）。我正在使用jQuery和jQuery Mobile。

我多次调用此函数（每行一次）。在每次调用时，我作为参数传递一个params对象，包含该行的数据，以及一个新创建的div元素（使用document.createElement("div")创建）：

    function loadRow(params, div){  
        var $div = $(div);        

        $div.load("some_page.html [data-custom-role=row]", function(){
            //FIXME Throws error: object is not a function!!
            var nameElement = $div("[data-custom-role=name]");
            nameElement.text(params.name);
        });
    }

此代码在FIXME评论下面的第一行引发此错误：

Uncaught type Error: object is not a function

源html文件（some_page.html）的（简化）内容：

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="ISO-8859-1"> 
        </head>
        <body>
            <div data-custom-role="row">
                <p data-custom-role="name"></p>
            </div>
        </body>
    </html>

我要做的是在新加载的div中选择“p”元素，并设置文本内容。我不能使用id来标识“p”元素，因为我稍后会将所有行注入页面，并且不能存在2个具有相同id的元素。这就是为什么我需要使用一个属性作为选择器，但是同时加载多个行，我需要确保我只是调整我正在加载的div中的“p”元素，而不是其他行div的。我认为变量$div在回调中是可用的，因为会创建一个闭包。

我做错了什么？如何在回调中查询和修改加载的内容？

提前致谢。

Answer 1

您正在引用包含函数但不是函数的DOM元素。

您无法使用$div()，您需要在案例中使用对象的函数.find()来查找具有属性data-custom-role=name的元素

尝试：

   function loadRow(params, div){  
        var $div = $(div);        

        $div.load("some_page.html [data-custom-role=row]", function(){
            $div.find("[data-custom-role=name]").html(params.name);
        });
    }

jQuery：如何从内部加载回调中修改加载的内容

1 个答案: