bind function to newly created element

Question

Thanks for any help.

I have a function. Inside this function, I create two buttons and assign two ids.

var content =

'<div>

'<div id="stationPopUpbtn">' +
        '<button id="createWave_updateStation" onclick="updateStationContent('+feature+')">Änderungen speichern</button>'+
        '<button id="createWave_deleteStation" onclick="deleteFeature('+feature+')">Station löschen</button>'+
    '</div>'+

'</div>';

later in the same function I want to do:

$('#_updateStation').bind('click', function(){ // stuff });

But it doesn't work. The content is added as part of a popup (OpenLayers) which in return is added to the map..

            var popup = new OpenLayers.Popup.FramedCloud(
                feature.id+"_popup",
                feature.geometry.getBounds().getCenterLonLat(),
                new OpenLayers.Size(250, 100),
                content,
                null,   // anchor
                true,   // closeBox exists
                //closeBoxCallback
                function(){
                    feature.style.pointRadius = 20;
                    map.removePopup(feature.popup);
                }
            );

EDIT:

$(document).append(content);
//map.addControl(selectControl);
//selectControl.activate();
$(document).on('click', '#createWave_updateStation' ,function(){
    console.log("TES");
});
    $('#create_stationPopup').popup('open');

Answer 1

Delegate the Event to Static parent container. Doing so will attach the event listener after matching the child nodes..

$(document).on('click', '#_updateStation',function(){ // stuff }); version >= 1.7

I am delegating it to the document as I am not sure of your HTML structure..

So better to replace the document with a Static Container..

Also as of jQuery version 1.7 .on() is the preferred method over .bind()

If you using version less than version 1.7 , you can use .delegate to attach the event

$(document).delegate('#_updateStation' ,'click',function(){ // stuff }); 
// version < 1.7