Question

我已经在我正在处理的网站上安装了一个jQuery插件。当点击某个图像时，该插件会向网站添加模态对话。我想在这个模式中添加第二个按钮，除了已经关闭的按钮之外还关闭窗口，我设法通过在HTML中为按钮创建div来实现。请注意，模式的内容在插件的内容变量中设置，如下所示：

content: '<p>Want to get in touch? Drop us an email at:</p><br/>   
         <p><input type="text" id="inset" name="inset"     
         value="shoesfromlastnight@gmail.com"       
         onClick="javascript:this.focus();this.select();"  
         readonly="readonly" size="30"/></p> <br/> 
         <span id="appendto"><p>We look forward to hearing from you!</p></span> 
         <div type="button" id="crmbutton">Okay</div>'

... #crmbutton是我想用作按钮的div。但是，出于某种原因，我在将事件处理程序设置为在那里创建的按钮时遇到了麻烦，以使其关闭模态。这听起来很简单，但出于某些原因，当我这样做时，它不会起作用：

$("#crmbutton").click(function() {     
this.close();
});

虽然我找不到任何文档，但我在这里使用的close（）方法与插件自己的X按钮用来关闭模式的方法完全相同。对于它的价值，这里是按钮的代码，首先创建关闭按钮，然后使用.on方法关闭点击模式：

this.closeButton = jQuery('<div/>', {'class': 'jBox-closeButton jBox-noDrag'}).on('touchend click', function(ev) { this.isOpen && this.close({ignoreDelay: true}); }.bind(this));

我还复制了.on方法之后的所有内容并将其应用到我的代码中，但也没有成功。

我还尝试了其他方法，比如调整上面的代码来动态创建按钮，然后使用append / prepend方法附加或预先添加它。这有效，但只有在附加到模式的容器时才会有效，该容器总是在容器外添加按钮。在某些元素之后添加按钮我没有运气，例如#appendto - 按钮就不会被添加。

有谁知道我在哪里可能会出错？这是我第一次使用jQuery，令我感到沮丧的是我没有尽头。谢谢！

Answer 1

问题是因为您没有在正确的范围内调用close方法。在你的eventlistener中，＆＃39;这个＆＃39;指向按钮。但是在你看到的代码中，＆＃39;这个＆＃39;已使用.bind（）方法更改为另一个范围。

$("#crmbutton").click(function() {     
    /* 'this' points to the element #crmbutton, which doesn't have a close method */
    this.close(); 
});

示例代码，请查看使用.bind（）方法的底部。

this.closeButton = jQuery(
    '<div/>', 
    {
        'class': 'jBox-closeButton jBox-noDrag'
    }
).on(
    'touchend click', 
    function(ev) {
        this.isOpen && this.close({ignoreDelay: true}); 
    }.bind(this) /* The scope is being set to another 'this' */
);

Documentation about the .bind() method

无法将事件处理程序添加到带ID的按钮中

1 个答案: