javascript - 如何在.append()中调用同一对象的方法？

Question

generarGrilla（）创建具有一些html按钮的输出。
每个按钮都调用存在于同一对象guardarReserva（）中的方法

加载页面时，无需单击任何按钮即可调用guardarReserva（），因为这行console.log("whatever "+this.i);会打印到控制台中。

如果我确实单击了具有监听器的按钮之一，则什么也不会发生。

var reservasAPP = {
    i:0,
    nombre: function () {
        return $('#h09').val();
    },    
    guardarReserva:function(){
        var reservaConfirmada = $('#horario'+this.i).html('--> '+this.nombre());
        console.log("whatever "+this.i);
        return false;
    },
    generarGrilla: function(){
        //it loads from html using jQuery(document).ready();
        for(this.i=1; this.i<13; this.i++){
            var impresionGrilla = $('#grilla').append("<button class=\"btn btn-primary btn-xs\" onclick=\"return "+this.guardarReserva()+"\">Reservar</button>");
        };
    },

}

Answer 1

您实际上是在guardarReserva()函数中运行.append()的。这就是为什么当您第一次打开浏览器时看到立即console.log("whatever "+this.i);的原因。

我认为您希望该按钮的onclick调用该函数。为此（假设reservasAPP在窗口名称空间中），您可以执行以下操作：

var reservasAPP = {
    i:0,
    nombre: function () {
        return $('#h09').val();
    },    
    guardarReserva:function(){
        var reservaConfirmada = $('#horario'+this.i).html('--> '+this.nombre());
        console.log("whatever "+this.i);
        return false;
    },
    generarGrilla: function(){
        //it loads from html using jQuery(document).ready();
        for(this.i=1; this.i<13; this.i++){
            // ---Change is here ------------------------------------------------------------------------|
            //                                                                                           V
            var impresionGrilla = $('#grilla').append("<button class=\"btn btn-primary btn-xs\" onclick=\"return reservasAPP.guardarReserva();\">Reservar</button>");
        };
    },

}

  为什么我不能使用“ this”，而我需要使用“ reservasAPP”


因此，让我们看一下您的某些原始代码（我将对其稍作修改，以使其短一些），并查看为什么它不起作用。

好东西所在的行在generarGrilla内，在for循环内，您在其中调用.append()函数。

var i_g = $('#grilla').append('<button onclick="return ' + this.guardarReserva() + '">Reservar</button>');

现在您就可以正确理解以下想法：执行该行代码时，this关键字指向reservasAPP对象。但是，您没有在设置onclick事件来使按钮运行this.guardarReserva()，而是立即在运行this.guardarReserva()函数。

让我们来看一个小的，半相关的示例：

var n = function() {
    return 'John';
};

var str = 'Hello, ' + n();

现在，变量str的值是多少？好吧，我们正在做两件事：


首先，我们有一个字符串文字Hello,。
然后，我们使用+运算符将其与函数n()返回的内容连接起来。


请注意，我们将如何使用n()返回的内容而不是原义的'n()'（字符串或函数）。这是因为我们实际上正在调用n（）函数。

因此，在一天结束时：

// str = 'Hello, John';

因此，让我们回头看看您的原始代码。实际发生了什么？好吧，您正在选择id设置为grilla的所有元素（我假设其中只有一个），然后调用jQuery append()函数。 .append()可以接受一个字符串作为其参数，它将使用该字符串，并将其作为HTML插入到DOM中。

您的字符串将三个不同的东西串联在一起。


'<button onclick="return '
this.guardarReserva()的返回值
'">Reservar</button>'


最后，您的guardarReserva函数将返回false，将其与字符串连接时将使用其。toString()方法，该方法在this case中返回实际的单词'false'。

因此，如果您以前看过HTML，就会发现HTML代码看起来像：

<div id="grilla">
    <button onclick="return false">Reservar</button>
</div>

这根本不是您想要的。

相反，为了解决该问题，我让您传入了一个长字符串（其中包括您要调用的函数名称）。因此，您的HTML最终看起来像：

<div id="grilla">
    <button onclick="return reservasAPP.guardarReserva()">Reservar</button>
</div>

好的，这就是为什么该功能立即运行以及按钮不起作用的原因。因此，我们需要将函数作为字符串传递给HTML按钮，以使其在单击时运行该函数。

所以，为什么不能传递字符串：

'<button onclick="return this.guardarReserva()">Reservar</button>'

它与浏览器如何评估该按钮内的this关键字有关。

实际上，让我们做一个实验

<button onclick="console.log(this);">CLICK ME</button>

单击按钮会发生什么？您可以自己进行此实验。您会看到它实际上记录了文字按钮。因为在按钮内联onclick中，this是指按钮本身！

您可以使用以下代码进行双重验证：

    <button id="button-1" onclick="console.log(this.id);">CLICK ME</button>

并看到它记录了字符串"button-1"（又名按钮的id）。

因此，如果this引用该按钮，我们就不能离开该上下文来获取我们的reservasAPP对象！通过直接引用reservasAPP对象（假设已在主<script></script>标记中声明了该对象，然后将其放置在可访问的window对象中），我们可以访问该对象及其内部属性。



边注：

我将使用其他方法来附加我们的onclick处理程序。

我会使用jQuery的.on()函数。这是如何定义generarGrilla的示例：

generarGrilla: function() {
        for (this.i = 1; this.i < 13; this.i++) {
            // Save our `this` object for later
            var self = this;
            var button = $('<button class="btn btn-primary btn-xs">Reservar</button>');

            // Set the `onclick` handler for our button (that isn't in the DOM yet)
            button.on('click', function(event) {
                // Use our saved `self` variable, which points to `reservasAPP`
                return self.guardarReserva();
            });

            // `onclick` is set, insert our button into the DOM
            var impresionGrilla = $('#grilla').append(button);
        };
    }

现在，当您运行reservasAPP.generarGrilla();时，它将插入您的按钮，并且它们都具有onclick事件处理程序。

您可以阅读this post，了解为什么有人认为在HTML属性上使用附加事件处理程序比内联JS更好。