与 bootstrap 2.2.2 一起使用的 jQuery 照明不能一起工作：e.css(...) 是未定义的照明.js

Question

我已经下载并设置了 jQuery 照明(http://www.tonylea.com/2011/jquery-illuminate/)
我确保页面中加载了 jQuery 和Illumination 插件。

然后我这样编码

Javascript 部分

window.onload = function(){
            if(document.URL.indexOf("mode=1") >= 0){ 

                    var input = $(".box#input");
                    $(document).scrollTop(input .offset().top - 60);
                    var v = input.val();
                    input.val('');
                    input.focus().val(v);
                    input.focus()

                    $(".btn#illuminate").illuminate({
                        'intensity': '0.3',
                        'color': '#98cb00',
                        'blink': 'true',
                        'blinkSpeed': '1200',
                        'outerGlow': 'true',
                        'outerGlowSize': '30px',
                        'outerGlowColor': '#98cb00'
                    });

            }
}

表单部分

<div class="chat">
    <form accept-charset="UTF-8" action="/comments" class="new_comment" data-remote="true" id="new_comment" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="GujuDnihu2UXCbJgbooDxoikjcJncFLf8hl4=" /></div>
        <div class="input-append">
            <input class="box" id="input" name="comment[body]" type="text" value="Hello there" />
            <button type="submit" class="btn" id="illuminate">submit</button>
        </div>
    </form> 
</div>

但是，提交按钮不会亮起。
我看到了 e.css(...) is undefined illuminate.js
的错误 为什么？我该如何解决这个问题？

Answer 1

上面的其他用户已经提到可以更改一些选择器，因此您可以使用$("#input"); 而不是使用$("#input");，因为页面中的id 必须是唯一的，因此不需要额外的类选择器.box。如果选择器是导致错误的原因，我在 chrome 开发工具中进行了测试，但至少在 chrome 30 中这并不重要。

我原封不动地复制了您的 html 并在本地运行它 - 它按预期工作，按钮会发光。

然后我创建了一个 online demo plunk at plnkr.co 并仅更改了一些内容：

1. div 的嵌套
2. 删除document.URL.indexOf("mode=1") >= 0，使其适用于任何网址

所以这是html

<div>
<form accept-charset="UTF-8" action="/comments" class="new_comment" 
    data-remote="true" 
    id="new_comment" method="post">
    <div class="chat">
      <input name="utf8" type="hidden" value="&#x2713;" />
      <input name="authenticity_token" type="hidden" 
          value="GujuDnihu2UXCbJgbooDxoikjcJncFLf8hl4=" />
    </div>
    <div class="input-append">
        <input class="box" id="input" name="comment[body]" 
               type="text" value="Hello there" />
        <button type="submit" class="btn" 
               id="illuminate">submit</button>
    </div>
</form> 
</div>

而且它似乎工作得很好。让我知道它是否按预期工作。错误一定在其他地方。

• 您使用的是什么版本的 jquery、jquery-ui 和Illumina？

更新：来自我们聊天的信息

我理解了以下内容：

• 您使用的是 jquery v1.9.1
• 引导程序 2.2.2
• jQuery UI CSS Framework 1.8.24（可能是this one?）
• 目前你不包括any version of jquery-ui.js

下一步是包含对 jquery-ui.min.js 的引用，并查看它是否与 bootsrap 一起使用。

更新 2：jQuery 照明与 jQuery 1.9.1 一起使用

在 jQuery 1.9.1 中使用 illuminate 0.7 plugin requires a modified version of illuminate 0.7