Do event listeners work with ajax?

[longtone]

I'm pretty new to unobtrusive js, and I don't know if this should work or not

 

This is a simplified version:

 

<div class="videoindexbox" id="sbb">
<form class="short_form" id="searchbigbox" action="/" method="get"  >
    <input class="submit_button" type="submit" id="searchbigbox_submit_btn" name="btn_videos" value="Go" />
</form>
</div>

 

And I've set an event listener:

function searchBigBoxListener() {


if(!document.getElementById || !document.getElementById('searchbigbox_submit_btn') || !document.createElement) return;

   var btn = document.getElementById('searchbigbox_submit_btn');
		btn.onclick = function(){ searchBigBox(); hide(document.getElementById('hidden_search')); return false};

}

 

When I load the page, it works fine.

 

But if I then repopulate #sbb using ajax, the event listener doesn't work

 

I am using innerHTML for this, so maybe that's the problem?

[salathe]

The event listener is bound to an individual element. When you repopulate the div, the old element is removed and new ones are added. They're entirely new, even if they share the same tags, names, ids.  At that stage, you will need to add the event listener to the new submit button.

 

 

[longtone]

That makes sense

 

Thanx