1

我的要求是当我将鼠标悬停在 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>

得到错误：

类型错误：$(...) 为空

4

1 回答 1

2

我一直习惯于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>
于 2013-02-07T17:02:36.890 回答