Question

我已经阅读了其他一些帖子，并按照他们建议的建议但无济于事。我的函数是通过嵌入元素中的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只匹配第一个索引元素？但是，我偶然发现了一些与我想要的完全一致的东西。我将在下面添加一个答案。

Answer 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结构的情况下，我应该指出，如果.filter()元素，您可能需要.find()而不是（或同时）.d-category是data的根源。

http://api.jquery.com/find/

~~http://api.jquery.com/filter/~~

Answer 2

请改用：

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

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

我确信它可以再精炼一点......但它确实有效！

jQuery无法访问通过.load（）加载的DOM元素

3 个答案: