KRL＆Ajaxを使って作業する

Question

ここでは具体的に説明します。 UtahRealEstate.comに行き、検索して地図表示で結果を見ると、地図上にプロットが表示され、右側にリストが表示されます。地図上のピンをクリックすると、ポップアップが表示され、MLS＃をクリックすると、プロパティの説明が表示された別のポップアップが表示されます。右のリストでMLS番号をクリックして、プロパティーの説明ポップアップを開くこともできます。

そのポップアップのhtmlにボタンを追加したいと思います。私は、HTMLの罰金を挿入することができますが、挑戦は、どのように私はその中にhtmlを読んで、私のボタンを追加することができますので、プロパティの説明が読み込まれたときに決定するのですか？

スクリーンショット：

Answer 1

私は、ユーザのクリックに基づいていなければならないまで、要素を探すことはしません。実際のトリッキーな部分は、マップ上のカードに表示されているMLS番号リンクがクリックイベントのウィンドウへの伝播を停止していたため、ライブクリックバインドを使用できませんでした。

私はずっと長くなることはできませんが、コードはかなりうまくコメントされていますので、私の狂気からあなたの道を読むことができるはずです。 ;放火犯コンソールの）

ruleset a60x561 { 
    meta { 
    name "utahrealestate" 
    description << 
     utahrealestate 
    >> 
    author "Mike Grace" 
    logging off 
    } 

    dispatch { 
    domain "utahrealestate.com" 
    } 

    rule search_for_realestate { 
    select when web pageview "\/search\/" 
    pre { 

    } 
    { 
     notify("title","content") with sticky = true; 
     emit <| 
     // sidebar click watching easy 
     // click event isn't being blocked so we can use .live and not 
     // worry about HTML being present at time of event listener binding 
     $K(".full_line a").live("click", function() { 
      console.log("sidebar mls clicked"); 
      // get the report!!! 
      KOBJ.a60x561.getReport(); 
     }); 

     // pin on map mls number is a bit harder because click event is 
     // being blocked from propegating to the window 
     // to get around this we can 
     // 1) watch for click on pin 
     // 2) wait for mls element to load 
     // 3) attatch our own element level event listener 
     $K("#mapdiv_OpenLayers_Container image").click(function() { 
      console.log("pin on map clicked"); 
      // attatch click event listener on mls element once it loads 
      setTimeout(function() { 
      KOBJ.a60x561.grabMls(); 
      }, 500); 
     }); 

     // ATATCH LISTENER TO MLS NUM ON MAP 
     KOBJ.a60x561.grabMls = function() { 
      console.log("looking for mls in hovercard"); 

      // grab jQuery reference to element we are looking for 
      var $cardMls = $K("#property-overview a:first"); 

      // only go on if it's on the page and visible 
      if (($cardMls.length > 0) && ($cardMls.is(":visible"))) { 

      console.log("foud mls on hevercard"); 

      // watch for click on mls num on card 
      $cardMls.click(function() { 
       console.log("mls clicked on hovercard above map pin"); 
       // get the report!!! 
       KOBJ.a60x561.getReport(); 
      }); 
      } else { 
      setTimeout(function() { 
       KOBJ.a60x561.grabMls(); 
      }, 500); 
      }; 
     }; 

     // GRAB REALESTATE LISTING DETAILS ONCE IT LOADS IN THICK BOX 
     KOBJ.a60x561.getReport = function() { 
      if ($K("#public-report-wrap").length > 0) { 
      console.log("Listing details found!"); 
      } else { 
      setTimeout(function() { 
       KOBJ.a60x561.getReport(); 
      }, 500); 
      }; 
     }; 
     |>; 
    } 
    } 
} 

スクリーンショット私はアプリ

Answer 2

短い答え（私は後で編集します）：

セレクターを見るために行動Watchを使用してください。

次に、clickを選択します。