javascript - jQuery照亮与bootstrap 2.2.2一起使用将无法一起工作: e. css(...)未定义照亮.js

Question

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

然后我这样编码

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 undefinedenchanted.js
为什么？我该如何解决这个问题？

Answer 1

上面的其他用户已经提到可以更改一些选择器，因此您可以使用 $("#input"); 而不是使用 $(".box#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 和照亮？

更新:来 self 们聊天的信息

我理解了以下内容:

• 您正在使用 jquery v1.9.1
• Bootstrap 2.2.2
• jQuery UI CSS 框架 1.8.24(可能是 this one ？)
• 目前您不包括 any version of jquery-ui.js

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

更新 2:jQuery 说明与 jQuery 1.9.1 的使用

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