change loses bind reference

Have a link that uses the ID to grab specific content from an external file (works, no problems here). I then change the ID of the link so that a new ID so that new info can be gotten the from the external file but the same info is always shown. So, I'm looking for some help in figuring out why the new info isn't being loaded but the old instead.

Here is the code for setting the new ID value. It resides in a completely separate section of the code. It then calls the function fncSetupInfoWindow() and it cre开发者_高级运维ates the bindings. .windowInfo is a class set on specific elements.

$('#pickedCenterProgram a').text(newProgram[0]).parent().slideDown().attr('id', newVal).attr('title', newProgram);
fncSetupInfoWindow();


function fncSetupInfoWindow() {
$('.windowInfo').unbind('mouseover mouseout').each(function () {
    var obj = $(this), position = [], contentID = globalObjects.emptyString, title = obj.attr('title'), contentID = obj.attr('id').toLowerCase();
    obj.bind({
        mouseover: function (e) {
            position = fncGetPositionArray(e.pageX, e.pageY);
            fncLoadStatusInfo(position[0], position[1], contentID, title);
        },
        mouseout: function () {
            $('#modInfoWindow').closeModal();
        }
    });
});

}

Here is the code for loading the info

function fncLoadStatusInfo(x, y, programName, title) {
initLoader.className = 'txt-c'; //create loader
initLoader.iconClass = 'alignVert-b';
$('#modInfoWindow').createModalWindow({ isModal: false, left: x, top: y, ignorePosition: false, title: title, width: 250, hideCloseIcon: true, autoOpen: true }).html(initLoader.createLoader());
$('#modInfoWindow').load('../pages/infoFile.htm ' + '#' + programName);
return false;

}

Everything works, well almost, except that the newly assigned ID is not being used but the original for when the page is created. I've tried numerous things as well as even destroying the modal (aka dialog) window all with the same results.

thanks ^.^

Thanks.

---

The problem is that you're using the id at the time it was bound (inside the .each()), rather than at the time of the event (inside the event handler). You can do it at the time of the event and simplify things overall like this:

function fncSetupInfoWindow() {
  $('.windowInfo').bind({
      mouseover: function (e) {
          var pos = fncGetPositionArray(e.pageX, e.pageY);
          fncLoadStatusInfo(pos[0], pos[1], this.id.toLowerCase(), this.title);
      },
      mouseout: function () {
          $('#modInfoWindow').closeModal();
      }
  });
}

Or even simpler (probably what you want) using .hover():

function fncSetupInfoWindow() {
  $('.windowInfo').hover(function (e) {
    var pos = fncGetPositionArray(e.pageX, e.pageY);
    fncLoadStatusInfo(pos[0], pos[1], this.id.toLowerCase(), this.title);
  }, function () {
    $('#modInfoWindow').closeModal();
  });
}