1

私の要件は、ハイパーリンクのマウスアウトイベントをクリックした後、helpText値にマウスオーバーすると、ハイパーリンクが表示されることです。そのために、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: $(...) は null です

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 に答える