javascript - 类型错误:$(...) 为空

Question

我的要求是，当我将鼠标悬停在 helpText 值上时，将显示其中包含超链接的值，单击超链接后应该发生 mouseout 事件。为此，我添加了一个 click 事件，然后添加了 mouseout 事件。但出现错误。

我的代码是:

<script>
   jQuery.noConflict();
    function doOnclick(){
        doMouseout();
    }
    function doMouseout(){
    alert('hi');
        $('Foo').hide();
    }
</script>

 <style>
    .helpLink {
      position:relative;
    }

    .video{
      display:none;
      width:160px;
      height:120px;
      background:#EEE;
      border:1px solid #CCC;

      position:absolute;

      z-index:10;
    }
  </style>


            <apex:outputLink styleClass="helpLink" onmouseover="$('{!$Component.Foo}').style.display = 'block';">  <!-- title="help" onmouseout="$('{!$Component.Foo}').style.display = 'none';" -->
                <apex:image value="/s.gif" styleClass="helpIcon" />
            </apex:outputLink>
            <apex:outputPanel id="Foo" styleClass="video" title="help" >
               <a  href="{!taburl}" target="_blank"  onclick="doOnclick();" >link</a>
               <a href="{!tabvideo}" target="_blank">Video</a>
            </apex:outputPanel>

出现错误:

TypeError: $(...) is null

Answer 1

我一直使用 jQuery.noConflict() 返回不同的别名来使用，以避免与可能使用 $ 的其他库发生冲突。绝对没有必要这样做，但我发现这有助于避免困惑。

也就是说，Salesforce 使用 VF 页面上的元素 ID 做了一些意想不到的事情(但如果您在 VF 标记中指定 ID，它至少会显示在生成的 HTML 的 ID 中某处 )，所以我建议使用一个选择器来获取 ID 包含您要查找的内容的所有元素，例如 jq$("[id*='Foo']").

<apex:includeScript value="{!$Resource.jquery}" />

<script >
    jq$ = jQuery.noConflict();
    function doOnclick(){
        doMouseout();
    }
    function doMouseout(){
        alert("hi");
        jq$("[id*='Foo']").hide();
    }
</script>

<style>
    .helpLink {
        position:relative;
    }
    .video{
        display:none;
        width:160px;
        height:120px;
        background:#EEE;
        border:1px solid #CCC;
        position:absolute;
        z-index:10;
    }
</style>

<apex:outputLink styleClass="helpLink" onmouseover="$('{!$Component.Foo}').style.display = 'block';">  <!-- title="help" onmouseout="$('{!$Component.Foo}').style.display = 'none';" -->
    <apex:image value="/s.gif" styleClass="helpIcon" />
</apex:outputLink>
<apex:outputPanel id="Foo" styleClass="video" title="help" >
    <a  href="{!taburl}" target="_blank"  onclick="doOnclick();" >link</a>
    <a href="{!tabvideo}" target="_blank">Video</a>
</apex:outputPanel>