我在这里非常具体。如果您转到UtahRealEstate.com并进行搜索并在地图视图中查看结果,则地图上将遍布地块,右侧列出列表。如果单击地图上的图钉,则会弹出一个窗口,然后单击MLS#,然后会出现另一个带有属性描述的弹出窗口。您也可以单击右侧列表上的MLS编号,然后打开一个属性描述弹出窗口。
我想在该弹出窗口的html中添加一个按钮。我可以插入html,但是挑战在于,如何确定何时加载该属性说明,以便随后可以读取其中的html并添加我的按钮?
屏幕截图:
最佳答案
我使用了一种技巧,即您不必根据用户的点击来查找元素。真正棘手的部分是,地图上卡片中显示的MLS数字链接正在阻止click事件向窗口的传播,因此我无法使用实时单击绑定。
我真的很恶心,所以我不能待更长的时间,但是代码中的注释相当好,因此您应该可以通过我的疯狂来读懂自己的方式。 ; )
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);
};
};
|>;
}
}
}
我测试应用程序时萤火虫控制台的屏幕截图