jQuery 不访问通过 .load() 加载的 DOM 元素答案

【问题标题】：jQuery not accessing DOM elements loaded via .load()jQuery 不访问通过 .load() 加载的 DOM 元素
【发布时间】：2010-07-31 01:09:05
【问题描述】：

我已阅读其他一些帖子并遵循他们的建议，但无济于事。我的函数是通过嵌入在元素中的 onclick 事件调用的。一切正常。数据加载，但我的焦点事件处理程序没有。 “d-category”是一个加载的元素类。它确实在加载的代码中多次出现。但是，我尝试将每个元素的代码更改为单个 id，但这仍然不起作用。考虑代码：

function loadData(id) {
            $("#entry-body").slideUp();
            $("#entry-head").slideUp();
            $("#edit-entry").load("/edit/", { id:id }, function(){
                $(".d-category").focus(function(){
                            $(this).html('<p>example html</p>');
                                    });
                            });
            $("#edit-entry-head").slideDown();
            $("#edit-entry").slideDown();

        };

我尝试将包含焦点事件处理程序的代码块与 .live() 一起移动到其他位置以将其与加载的元素绑定，但无济于事。有什么想法吗？

编辑

我相信上面代码的问题是.d-category 只匹配第一个索引元素？但是，我偶然发现了一些完全按照我想要的方式工作的东西。我将在下面添加一个答案。

【问题讨论】：

我可以通过 .click 或 .focus 事件在回调函数中工作时收到警报，告诉我我正在调用的代码有问题。

标签： jquery django

【解决方案1】：

编辑：不知道为什么.click(function() {...}); 不适合你。您需要提供更多代码才能知道问题所在。

在使用.live() 之前，您应该考虑.delegate() 是否适合您。类似于.live()，但被限制在页面的某个部分，因此效率更高。

假设页面加载时存在edit-entry 元素，请将其放在.ready() 函数中的某个位置。

$("#edit-entry").delegate('.d-category', 'click', function() {
    $(this).html('<p>example html</p>');
});

然后从您的 .load() 回调中删除处理程序分配。

编辑：我错误地指出您需要.find() 返回数据中的元素。 .load() 不正确。

问题更可能是.focus() 事件被放置在非input 元素上，或者.html() 被调用在input 元素上。

另外，<p>example html</p> 之后缺少单引号。我猜这只是一个错字。

原答案

~~正在加载的数据中是否有.d-category 元素？如果是这样，您需要在该数据中.find()他们。~~

   // Reference the data returned --------------------v
$("#edit-entry").load("/edit/", { id:id }, function( data ){
               // Find the .d-category elements in the data
            $(data).find(".d-category").focus(function(){
                        $(this).html('<p>example html</p>');
             });
});

不过，我很想知道它们是什么类型的元素。 .focus() 通常用在 input 元素上，所以我不确定你为什么要调用 .html()。

在不知道data 的HTML 结构的情况下，我应该指出，如果.d-category 元素位于data 的根部，您可能需要.filter() 而不是（或连同）.find() .

【讨论】：

+1 表示焦点绑定到非表单元素。
我也用 .click 试过了，但没用。我试图访问的 html 是一个“div”。
@ionalchemist - 所以您说.d-category 元素已成功添加到页面，但是当您将上面的代码更改为使用.click 而不是.focus() 时，什么也没有发生？对吗？
@patrick dw - 是的，完全正确。我目前正在改进我的 html 代码以弥补这一点，但我宁愿不这样做。 :-)
@ionalchemist - 好吧，根据你到目前为止告诉我的内容，你的代码应该可以工作。除非有什么东西导致你的 javascript 崩溃，否则点击处理程序应该触发。 load() 之后的其他 javascript 是否有效？例如，$("#edit-entry-head").slideDown(); 是否运行？

【解决方案2】：

改用这个：

$(".d-category").live('focus', function() {
     $(this).html('<p>example html</p>');
})

【讨论】：

是的，我也试过了......和nada。我尝试添加元素特定的 id 而不是通用类标识符。没用...我在想也许我需要确保 .html 在我的文档上完全正常工作，也许我的 jQuery 副本有问题？
好吧，很快就解决了。它工作正常。我怎么敢认为这不是我的疏忽！？ :-)

【解决方案3】：

这是我想要的效果：

function loadData(id) {
            $("#entry-body").slideUp();
            $("#entry-head").slideUp();
            $("#edit-entry").load("/edit/", { id:id }, function(){
                $('.d-category').each(function(){
                    $(this).one('click', function(){
                        $(this).insertSelectbox();});});

            });
            $("#edit-entry-head").slideDown();
            $("#edit-entry").slideDown();
            }

$.fn.insertSelectbox = function(){
        var sid = $(this).attr('id');
        var opt1 = $('#' + sid).html();
        $("#" + sid).html('<select name="category" id="cat-selector"><option>'  
        + opt1 + '</option>{% for cat in ctgy %}<option>{{ cat.name }}</option>'
        + '{% endfor %}</select>');}

我相信它可以再改进一点......但它有效！

【讨论】：