1

我在 Jquery 中有这段代码并且工作正常，但唯一的问题是不要更改页面上的 de div

   $("a[rel^='meGusta']").click(function(){
            var usuario= $(this).data('usuario');
            var idea= $(this).data('idea');
            // llamada ajax
            $.ajax({
                url: '{{path('votarIdea')}}',
                data: {user: usuario, idea: idea},
                type: 'POST',
                dataType: 'html',
                success: function(){
                    var str= $(this).text().trim();
                    if (str == 'Me gusta'){
                        $(this).text("No me gusta");
                    }else{
                        $(this).text("Me gusta");
                    }

                    $('.popularityPopularidad').load('cambioVoto.html.twig');
                }
                //error: noCambio()
            });

votarIdea 函数返回：<span> Popularidad:</span> {{ total }}

所以我必须改变这个div：首先

<div class="popularityPopularidad">
    <span> Popularidad:</span> {{ votaciones[idea.getId()] }}
</div>

第二个

 <a href="#" rel="meGusta{{num}}" data-usuario="{{ usuario }}" data-idea= "{{idea.getId()}}">
        {% if (opc)%}
            No me gusta
        {% else%}
            Me gusta
        {% endif %}
        </a>

萤火虫抛出这个错误

TypeError: context.createDocumentFragment is not a function
error source line:
[Parar en este error]   

fragment = context.createDocumentFragment();

但不要这样做。任何的想法。

4

1 回答 1

5

我自己也遇到了类似的问题，因为我在其他任何地方都找不到解决方案……就是这样！（请想象一下令人印象深刻的鼓声）

怎么了

错误消息不是很有表现力，如果不是误导的话。这就是它应该说的：

jQuery 函数接收到的对象不是有效的 jQuery 对象（但应该是）

现在，要做到这一点实际上并不容易，因为 jQuery 在几乎所有情况下都回退到一个“空”对象。但是，类似于以下的表达式应该可以可靠地让您找到错误：

$({}).text("asb");
$({}).append("<p></p>");

奇怪的是，这些不会引发错误：

$({}).text(); // returns ""
$({}).html(); // returns undefined

我没有对此进行更深入的研究，但我认为可以肯定地说，如果上下文不是有效的 jQuery 对象，则任何尝试操作DOM 都会引发此错误。

本题的具体问题是，在ajax成功函数中，this不是html元素，而是ajax事件对象。所以表达式$(this) 没有返回一个有效的 jQuery 对象，随后调用$(this).text()（或实际上任何东西）都会导致这个错误。

您可以使用以下行轻松重现错误

$.get("VALID URL", function(){ $(this).append("foo"); }, "text");

解决方案

所以你要做的就是把click()函数的上下文保存在一个像这样的upvalue中：

$("a[rel^='meGusta']").click(function(){
    var usuario= $(this).data('usuario');
    var idea= $(this).data('idea');
    var self = this; // <-- NEW LINE

    // llamada ajax
    $.ajax({
        url: "{{path('votarIdea')}}", // <-- Syntax error (see below)
        data: {user: usuario, idea: idea},
        type: 'POST',
        dataType: 'html',
        success: function(){
            var str= $(self).text().trim(); // <-- CHANGED LINE
            if (str == 'Me gusta'){
                $(self).text("No me gusta"); // <-- CHANGED LINE
            }else{
                $(self).text("Me gusta"); // <-- CHANGED LINE
            }

            $('.popularityPopularidad').load('cambioVoto.html.twig');
        }
        //error: noCambio()
    });
});

如何找到真正导致错误的行（使用 Firebug）

由于 QA 似乎不知道如何找到正确的代码行，所以这里有一个简短的指南：

  • 重复导致错误的操作（或在页面加载时重新加载）
  • 右键单击错误并在上下文菜单中选择break on this error
  • 重复导致错误的操作
  • 在脚本视图中（Firebug 应该会自动打开它），单击跳出 (Shift+F11)（跳出）按钮，直到脚本视图跳转到不在的行jquery-*.js

“语法错误”

在原始代码中有一个“语法错误”。但是，twig 可能在实际执行 javascript 之前将其替换为不包含单引号的不同代码，因此在浏览器中打开站点时不会出现语法错误。但是，编写语法正确的代码仍然是一个好主意。

于 2012-11-28T23:33:33.683 回答