Listener on element in Hidden TwebHTMLDiv is not triggered

WEB TMS WEB Core
1

Hi all,
I have a problem on addEventlistener on hidden div

I have a form with 2 TWebHTMLDiv (VisiDiv & HidDiv)
VisiDiv is visible and HidDiv not.
In the create form proc I define each div contents

// --- first visible
VisiDiv.HTML.Add ('

');
.....
VisiDiv.HTML.Add('Login'); // _buttonloginid is a const
VisiDiv.HTML.Add ('
');

// --- second not visible
HidDiv.HTML.Add ('

');
.....
HidDiv.HTML.add(' Rechercher'); // _buttonsearchid is a const
HidDiv.HTML.Add ('
');

// --- Add events
aElement1 := document.getElementById(_buttonloginid);
if (aElement1 <> null) then aElement1.addEventListener('click',@Self.loginClick);

aElement2 := document.getElementById(_buttonsearchid);
if (aElement2 <> null) then aElement2.addEventListener('click',@Self.searchClick);

I tried many possible combinations but event2 of aElement2 (searchClick) is never fire.
Only when div2 (HidDiv) is visible from start.

The only way is to add a proc on "TWebHTMLDiv.onclick" (HidDiv_MouseClick(Sender: TObject);) directly on "HidDiv component" () and after use this in function

procedure TMainForm.HidDiv_MouseClick(Sender: TObject);
var
aInput,
aElement : TJSElement;
aSearchText : String;
begin
// Init
asm
aElement = event.target;
end;
if (aElement.id = _buttonsearchid) then
begin
end;
end;

Is there no other way ???
It means that we can't add a listener on element of an hidden TWebHTMLDiv ???

Thanks

2

I cannot make sense of your question.
Does this concern HTML DIVs from the HTML template you map controls to?
You also seem to refer to 'click' event handlers, but it is unclear to me how you'd click on an invisible DIV.

To allow us to look in an efficient way at your problem, please isolate this into a small/minimal test project & provide clear steps to reproduce a problem.

Also not sure why you need to get the element via document.getElementById() and want to use addEventListener instead of using the built-in mechanism to assign event handlers.
Note that you can get the HTML element handle of a control via WebHTMLDiv.ElementHandle: TJSElement

3

It's maybe a little complicated.
I have an empty form
2 TWebHTMLdiv component (Div_login, Div_search)

on create form I have this
// --- Login
div_login.HTML.Clear;
div_login.HTML.Add('

');
div_login.HTML.Add('...');
div_login.HTML.Add('Login');
div_login.HTML.Add('
');

div_search.html.Clear;
div_search.HTML.add('');
div_search.HTML.add('

');
div_search.HTML.add('
');
div_search.HTML.add(' ');
div_search.HTML.add(' Rechercher');
div_search.HTML.add('
');
div_search.HTML.add('
');
div_search.HTML.add('');

// Add login click
aElement1 := document.getElementById(_buttonloginid);
if (aElement1 <> null) then aElement1.addEventListener('click',@Self.loginClick);

// Add search click
aElement2 := document.getElementById(_buttonsearchid);
if (aElement2 <> null) then aElement2.addEventListener('click',@Self.searchClick);

// * init visible or not
div_login.visible := true;
div_search.visible := false;

procedure TMainForm.loginClick(pEvent : TMouseEvent);
begin
fConnected := true;
div_login.Visible := Not fConnected;
div_search.Visible := fConnected;
end;

procedure TMainForm.searchClick(pEvent : TMouseEvent);
begin
showMessage('searchClick Here');
end;

We start api
click on login button (loginClick is triggered) => hide div_login and show div_search (see function)
and we click on button search but we never go through the linked function (searchClick)

To do this we must have

// * init visible or not
div_login.visible := false;
div_search.visible := true;

why ???????
is that a little clearer?

4

Can't you please isolate this and send a test project that compiles & runs right-away and as such take all the guesswork from our side out of it and avoid that we spent all the time with trial & error to reproduce what you experience?