Input button stop working when filling the div

Question

I have a div in my html defined like this:

<div id="rgroups" class="dialogWindow fileDialog"  style="display:none;" >
<input id="rgroups_ok" class="dialogButton" type="submit" value="Done"/> 
<label for="rgroups_ok"><span class="label">Start</span></label>';
</div>

In my js file the rgroups_ok is define that way:

$('rgroups_ok').observe('click', function ()
{
ui.hideDialog('rgroups');
});

If I keep to that it's working fine, the button is working.

Then I am filling that html div like that:

var div=document.getElementById('rgroups');
div.style.display='inline-block';
for (i = 1; i <= count; i++) {
div.innerHTML+=' Rgroup '+i+' values separated by / symbol:  \n <textarea id="Rgroup"'+i+' rows="4" cols="50"> </textarea>';}

With that inner HTML defines button stops working...

Any clue?

Thanks

Using append() instead of string concatenation with innerHTML property migth help. Also using JQuery's on() event is better to use than observe() and bind(), generally. — Cengiz Araz, Jan 31 '17 at 11:21

scx · Answer 1 · 2017-01-31T11:30:26.963

1

Try changing observe to on so this:

    $('#rgroups_ok').on('click', function ()
    {
        ui.hideDialog('rgroups');
    });

You can check the details for on() here.

Observe seems to be obsolete and may not be a thing you are looking for.

edited Jan 31 '17 at 11:30

answered Jan 31 '17 at 11:19

scx

2,749
2
25
39

not changinr anything. I precise the observe is working while I am not writing html from my js. – Laetis Jan 31 '17 at 11:25
observe is not working fine, first of all you misuse it 2nd parameter should be the object to observe, instead you try to pass there a string ? I have added # to the jquery selector, this should make it work with on('click') – scx Jan 31 '17 at 11:35

Orchan Magramov · Answer 2 · 2017-01-31T13:10:08.870

I could not understand clearly. so I made demo code.
If you could mention your main subject/idea it would help us.

Full code:
Head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Body:

<div id="rgroups" class="dialogWindow fileDialog">
        <label for="rgroups_ok">
            <span class="label">Start</span>
        </label>
    </div>

<div id="rgroups2" style="display:none;">
    <p onclick="textA()">Hey click here</p>
</div>

<button id="rgroups_ok2" class="dialogButton" onclick="a()">
    Done
</button>
<script>
    function a() {
        $('#rgroups').css("display", "none");
        $("#rgroups2").css("display", "inline-block");
        $("#rgroups_ok2").css("display", "none");
    };


    function textA() {
        var count = 100;
        //document.getElementById("rgroups2").innerHTML += "Bye";
        for (i = 1; i <= count; i++) {
            document.getElementById("rgroups2").innerHTML += '<p> Rgroup ' + i + ' values separated by / symbol:  \n <textarea id="Rgroup" rows="4" cols="50">' + i + ' </textarea></p>';
        }
    }
</script>

score 0 · Answer 3 · edited May 23 '17 at 10:29

0

Hi found the solution on this post: Is it possible to append to innerHTML without destroying descendants' event listeners?

To sum up it's not possible to append without destroying all child. Ths the event have to be reconstructed.

Thanks

edited May 23 '17 at 10:29

Community

1
1

answered Jan 31 '17 at 13:47

Laetis

1,337
3
16
28

Input button stop working when filling the div

3 Answers3