修改

Question

编辑：请参阅更新！

我有以下html：

<body>
  <span id="milestone1">
  </span>   
  <img id="image1" src="blabla.jpeg" style="width:400px;height:200px;" />
  <div id="divOverlayOverImage1" style="position:absolute; top:100px; left:40px; width:400px;height:200px;" onclick="DoFunkyStuff();"><div>
</body>

首先divOverlayOverImage1位于Image1之上，覆盖它，但如果我运行下面的代码，则#divOverlayOverImage1元素将不再覆盖#image1元素。

$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');

我希望有{strong>事件在#image1更改其位置时通知我，因此我可以更新#divOverlayOverImage1的位置。

注意：我无法完全控制dom。 $("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');命令由第三方运行。

UPDATE：我没有对DOM的完全控制，所以我无法将回调添加到元素添加功能，因为这不是我进行此调用。另外，我不能像疯了一样修改HTML。我只是来到一组网站，通过JavaScript追加并覆盖到特定的图像，就是这样。还有其他竞争对手也会改变HTML。

Answer 1

如果您完全控制了DOM，并且我认为您拥有，那么您可以添加对您在DOM中所做的每项更改的调用，这些更改将影响<span>。

function yourFunction() {
    $("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
    updateMyOverlayPosition();
}

如果不起作用，你可以在这里试试这个：Detect changes in the DOM

修改

如果你想要活动：

$('#image').on('adjustOverlay',function(e) {
    // adjust the position of the overlay
}

$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
$('#image').trigger('adjustOverlay', {extra: "info", some: "parameters"});

EDIT2

由于您无法完全控制DOM中的更改，您可能会感到惊讶，您可以使用上面已经提供的链接或检查间隔是否覆盖仍然在哪里它需要。这并没有以你想要的方式解决问题，但DOM更改没有本机事件，所以你必须坚持使用某种解决方法。

var checkTime = 100; //100 ms interval
var check = setInterval(function() {
    // adjust overlay position
}, checkTime);

EDIT3

下一个可能的解决方案：如果您知道如何在DOM中插入影响代码，您可以尝试更改该方法，以便它始终运行您的adjustOverlayPosition()或触发事件，如果您喜欢事件。示例：如果使用jQuery的.after()插入，则可以修改该函数：

jQuery.fn.extend({
    // since the .after() function already exists, this will
    // actually overwrite the original function. Therefore you need
    // the exact code that was originally used to recreate it.
    after: function() {
        return this.domManip( arguments, function( elem ) {
        if ( this.parentNode ) {
            this.parentNode.insertBefore( elem, this.nextSibling );
        }
        // call the function directly
        adjustOverlayPosition();
        // or call an event
        $('#image').trigger('adjustOverlay', {extra: "info", some: "parameters"});
    }
});

缺点：此解决方案可能存在风险，只有在您知道最初使用的代码时才有效。所以它也取决于jQuery版本。

Answer 2

一种解决方法是重新组织您的布局。将图像包裹并叠加到div中。这样他们就会一直保持这种状态。

<div id="wrap">
    <img id="i1" src="..." />
    <div id="overlay" />
</div>

#wrap {
    position: relative;
    width: 400px;
    height: 200px;
}

#overlay {
    position: absolute;
    top: 100px; 
    left: 40px; 
    width: 400px;
    height: 200px;
}

Answer 3

如果仅使用ovelay包装img只是你的要求，我认为你可以使用纯css解决方案：

Try the demo

HTML

<p id="milestone1">
First Overlay
</p>   
<div class="img-overlay-container" style="width:400px;height:200px;">
 <img id="image1" src="blabla.jpeg"/>
 <div id="overlay1" onclick="alert('clicked');">
 </div>
</div>  
<p id="milestone2">
Second Overlay
</p>       
<div class="img-overlay-container" style="width:100px;height:400px;">
 <img id="image2" src="blabla.jpeg"/>
 <div id="overlay2" onclick="alert('clicked');">
 </div>
</div>

CSS

.img-overlay-container{
  position: relative;
  display:inline-block;
}
.img-overlay-container > img{

}

.img-overlay-container > div{
  position:absolute; 
  top:0px; 
  left:0px; 
  width:100%;
  height:100%; 
  background: rgba(3,3,3,.1);
}

Answer 4

function changePosition(callback) {
  $("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
 callback();
}

然后你可以拨打changePosition(function() {// Add your event handler function})。

希望这会对你有帮助！

确定HTML元素位置更改

4 个答案:

修改

EDIT2

EDIT3