Bug Tracker

Ticket #5328 (closed bug: invalid)

Opened 5 years ago

Last modified 2 years ago

replaceWith - "node cannot be inserted ..."

Reported by: Ghodmode Owned by: Ghodmode
Priority: major Milestone: 1.4
Component: core Version: 1.3.2
Keywords: Cc: ghodmode@…
Blocking: Blocked by:

Description

I'm trying to do image replacement on a click event using the replaceWith function and a list of images. When I click the image disappears entirely and I get the error (in Firebug console window): 'Node cannot be inserted at the specified point in the hierarchy" code: "3  http://home/dev/planeticeland/js/jquery-1.3.2.min.js Line 12'

Here's some code: HTML: <div id="sidebar-form">

<div class="img-wrapper">

<img alt="iceland" src="images/Iceland_map_main.png" usemap="#map"/>

</div>

<map name="map"> <area shape="circle" coords="50,93,7"

alt="Reykjavík Area" title="Reykjavík Area" nohref="nohref" />

JavaScript: var maps = []; mapsmain? = new Image(); ... mapsReykjavík_Area? = new Image(); ...

for ( i in maps ) {

var map_name; map_name = 'images/Iceland_map_'+i+'.png'; maps[i].src = map_name; maps[i].useMap = '#map';

}

$(document).ready(function(){

var areas = $('area'); for ( var i=0; i<areas.length; i++ ) {

$(areas[i]).bind('mouseenter mouseleave click', mapHilight);

};

});

function mapHilight(event){

$('#sidebar-form .img-wrapper img:first').replaceWith( maps[place.replace(/ /, '_')] );

}

It works fine on the mouseenter and mouseleave events. The error message only occurs on the click event.

The following code works, but doesn't use jQuery functions:

var sidebar_form = document.getElementById('sidebar-form'); var img_wrapper; var sidebar_divs = sidebar_form.getElementsByTagName('DIV'); for ( var i=0; i<sidebar_divs.length; i++ ) {

if (sidebar_divs[i].className == 'img-wrapper') {

img_wrapper = sidebar_divs[i]; break;

}

} var mapImage = img_wrapper.getElementsByTagName('IMG')[0]; img_wrapper.removeChild(mapImage); img_wrapper.appendChild( maps[place.replace(/ /, '_')] );

It identifies the containing element and the image, removes the image, than appends the replacement image. Isn't that pretty much what the replaceWith function is supposed to do?

Change History

comment:1 Changed 4 years ago by rwaldron

  • Owner set to Ghodmode
  • Status changed from new to pending

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, test against the jQuery 0 GIT version to ensure the issue still exists. Be Excellent to eachother!

comment:2 Changed 4 years ago by trac-o-bot

  • Status changed from pending to closed
  • Resolution set to invalid

Automatically closed due to 14 days of inactivity.

Note: See TracTickets for help on using tickets.