Re-trigger event from event - events

Question

Here's a search box module (heavily sanitised to satisfy boss). It all works, apart from the more event. I get the results, they appear, and the "load more" div appears.
On clicking more i would like the search event to rerun. In more, i do some trivial session calculations which i need to pass to the search event, which works. The click() does not.
I've tried moving the more event outside of the search event, without success.
This fiddle seems to work, albeit with the node ID instead.
define([
'dojo/dom',
'dojo/dom-construct',
'dojo/on',
'dojo/query'
'dojo/domReady!'
], function(
dom,
domConstruct,
on,
query
) {
var search = {
display: function(){
sb = '<div id="searchWrapper" class="searchWrapper"><h3>Search</h3>
<input id="searchString" type="text" />';
sb += '<h3>Search</h3><select id="sBy">';
sb += '<option value="0">Choose...</option>';
sb += '<option value="f">Foo</option>';
sb += '<option value="b">Bar</option>';
sb += '<option value="fb">Foo & Bar</option>';
sb += '</select>';
sb += '<div class="searchBtn">
<button type="button" id="search">Search</button></div>';
sb += '</div>';
domConstruct.place(sb, dom.byId('body'), 1);
on(dom.byId('search'), 'click', function(e){
var r = thisIsWhereDataIsRetrieved(params, whatever);
// r is the response from the db call
if(typeof r === 'object'){
var sr = 'here are the results!';
for (var result in r) {
sr += 'this particular result';
}
if(r.length === 50) {
sr += '<div id="more" class="more">Load More</div>';
}
domConstruct.place(sr, dom.byId('searchWrapper'), 'last');
}
on(query('.more'), 'click', function(e){
// get next results having done stuff
// to track the state of the search, which works
dom.byId('search').click(); <<<<< not working
});
});
}
}
return search;
});
EDIT: I got around this by re-calling thisIsWhereDataIsRetrieved inside the more event and appending the next results before the more node, but it still seems as though it'd be better to do what i can't!
EDIT2: added more node!

Answer 1

You need to use something else than an anonymous function.
For instance, something like this:
(note you may need to have a better construction than the actual method, using query may have side effects if you do not clean properly the dom. I encourage you to write a proper widget and to use attach-points)
define([
'dojo/dom',
'dojo/dom-construct',
'dojo/on',
'dojo/query'
'dojo/domReady!'
], function(
dom,
domConstruct,
on,
query
) {
var search = {
display: function() {
sb = '<div id="searchWrapper" class="searchWrapper"><h3>Search</h3>
<input id="searchString" type="text" />';
sb += '<h3>Search</h3><select id="sBy">';
sb += '<option value="0">Choose...</option>';
sb += '<option value="f">Foo</option>';
sb += '<option value="b">Bar</option>';
sb += '<option value="fb">Foo & Bar</option>';
sb += '</select>';
sb += '<div class="searchBtn">
<button type="button" id="search">Search</button></div>';
sb += '</div>';
domConstruct.place(sb, dom.byId('body'), 1);
var onSearchClick = function(e) {
var r = thisIsWhereDataIsRetrieved(params, whatever);
// r is the response from the db call
if (typeof r === 'object') {
var sr = 'here are the results!';
for (var result in r) {
sr += 'this particular result';
}
if (r.length === 50) {
sr += '<div id="more" class="more">Load More</div>';
}
domConstruct.place(sr, dom.byId('searchWrapper'), 'last');
}
on(query('.more'), 'click', function(e) {
// get next results having done stuff
// to track the state of the search, which works
onSearchClick();
});
}
on(dom.byId('search'), 'click', function(e) {
// get next results having done stuff
// to track the state of the search, which works
onSearchClick();
});
}
}
return search;
});