Question

我在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>

firebug抛出此错误

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

fragment = context.createDocumentFragment();

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

Answer 1

我自己遇到了类似的问题，因为我无法在其他任何地方找到解决方案......在这里！（请想象一下适当令人印象深刻的鼓声）

发生了什么

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

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

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

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

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

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

我没有深入研究这个问题，但我认为如果上下文不是一个有效的jQuery对象，那么任何对DOM的操作的尝试都会抛出此错误。

这个问题的具体问题是，在 ajax成功函数中，this不是html元素，而是ajax event object。因此表达式$(this) 不会返回有效的jQuery对象，随后调用$(this).text()（或实际上大多数情况）将导致此错误。

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

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

解决方案

所以你需要做的就是从click()函数中保存上下文，如下所示：

$("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似乎不知道如何找到正确的代码行，这里有一个简短的指南：

重复导致错误的操作（或在页面加载时重新加载）
右键单击错误并在上下文菜单中选择中断此错误
重复导致错误的操作
在脚本视图中（Firebug应自动打开它），单击（步出）按钮，直到脚本视图跳转到{{1}中不的行}}

“语法错误”

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

用jquery改变div

1 个答案:

发生了什么

解决方案