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

您是否尝试过reservasAPP.guardarReserva（）而不是this.guardarReserva（）？

Answer 2

您在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>");
        };
    },

}

为什么我无法使用＆＃34;这个＆＃34;我需要使用＆＃34; reservasAPP＆＃34;

所以，让我们看看你的一些原始代码（我稍微修改一下，使它稍微缩短一点），看看为什么它没有工作。

优质内容发生的行在generarGrilla内，在您调用.append()函数的for循环内。

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，当与字符串连接时，使用其{。{1}}方法，this case中的方法返回实际的单词{{ 1}}。

因此，如果您以前查看过HTML，您会看到HTML代码如下：

toString()

这根本不是你想要的。

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

'false'

好的，这就是为什么功能立即运行，以及为什么你的按钮没有工作。所以我们需要将函数作为HTML按钮的字符串传递，以便在单击时运行该函数。

那么，为什么你不能传入字符串：

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

它与浏览器如何评估该按钮中的<div id="grilla"> <button onclick="return reservasAPP.guardarReserva()">Reservar</button> </div>关键字有关。

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

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

单击按钮会发生什么？你可以自己做这个实验。您将看到它实际上记录了文字按钮。因为在内嵌this按钮内，<button onclick="console.log(this);">CLICK ME</button>指的是按钮本身！

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

onclick

并查看它记录字符串this（又名按钮＆＃39; s <button id="button-1" onclick="console.log(this.id);">CLICK ME</button>）。

因此，如果"button-1"引用该按钮，我们就无法保留该上下文以获取我们的id对象！通过直接引用this对象（假设它已在您的主reservasAPP标记中声明，从而将其放在可访问的reservasAPP对象中），我们可以访问该对象对象，以及它的内在属性。

侧面注意：

我会使用不同的方法来附加我们的<script></script>处理程序。

我使用jQuery的.on()功能。以下是您可以定义window：

onclick

现在，当您运行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); }; }个事件处理程序。

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

我怎样才能在.append（）中调用同一个对象的方法？

2 个答案:

侧面注意：