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：$（...）为空

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>

TypeError：$（...）为null

1 个答案: