$('#id').html(var) not working

Question

I am a new to jquery and can't figure out the exact problem. Any help will be highly appreciated. The first click on the button element works fine. But the subsequent clicks on any other button doesn't work at all.

My Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="det_cont">
    <ul>
        <li>
            <span class="lispan_1">Mobile</span>
            <span class="lispan_2">:</span>
            <span class="lispan_3">
                <input type="text" id="umob" maxlength="20" disabled>
                <span class="lispan_sub" id="mobli">
                    <button class="lispan_4 add" title="Add" id="mobadd">Add</button>
                </span>
            </span>
        </li>
        <li>
            <span class="lispan_1">Date of Birth</span>
            <span class="lispan_2">:</span>
            <span class="lispan_3">
                <input type="text" id="udob" maxlength="11" disabled>
                <span class="lispan_sub" id="dobli">
                    <button class="lispan_4 add" title="Add" id="dobadd">Add</button>
                </span>
            </span>
        </li>
        <li>
            <span class="lispan_1">Gender</span>
            <span class="lispan_2">:</span>
            <span class="lispan_3">
                <input type="text" id="ugen" maxlength="6" disabled>    
                <span class="lispan_sub" id="genli">
                    <button class="lispan_4 add" title="Add" id="genadd">Add</button>
                </span>
            </span>
        </li>
    </ul>
</div>

<script type="text/javascript" src="CNC/js_lib/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
    var othli = new Array();
    othli[1] = $('#mobli').html();
    othli[2] = $('#dobli').html();
    othli[3] = $('#genli').html();
    $('#det_cont .lispan_4').on('click',function() {
        if($(this).hasClass('add')) {
            if(this.id == 'mobadd') {
                $('#umob').prop("disabled",false);
                $('#umob').css({backgroundColor: '#FFFFFF'});
                $('#det_cont input').not('#umob').blur();
                $('#det_cont input').not('#umob').prop("disabled",true);
                $('#det_cont input').not('#umob').css({backgroundColor: 'rgba(0,255,153,0)'});
                $('#umob').focus();
                $('#mobli').html('<button class="lispan_4 sub" title="Submit" id="mobsub">Submit</span>');
                $('#dobli').html(othli[2]); 
                $('#genli').html(othli[3]);
            } else if(this.id == 'dobadd') {
                $('#udob').prop("disabled",false);
                $('#udob').css({backgroundColor: '#FFFFFF'});
                $('#det_cont input').not('#udob').blur();
                $('#det_cont input').not('#udob').prop("disabled",true);
                $('#det_cont input').not('#udob').css({backgroundColor: 'rgba(0,255,153,0)'});
                $('#udob').focus();
                $('#dobli').html('<button class="lispan_4 sub" title="Submit" id="dobsub">Submit</span>');
                $('#mobli').html(othli[1]); 
                $('#genli').html(othli[3]);
            } else if(this.id == 'genadd') {
                $('#ugen').prop("disabled",false);
                $('#ugen').css({backgroundColor: '#FFFFFF'});
                $('#det_cont input').not('#ugen').blur();
                $('#det_cont input').not('#ugen').prop("disabled",true);
                $('#det_cont input').not('#ugen').css({backgroundColor: 'rgba(0,255,153,0)'});
                $('#ugen').focus();
                $('#genli').html('<button class="lispan_4 sub" title="Submit" id="gensub">Submit</span>');
                $('#dobli').html(othli[2]); 
                $('#mobli').html(othli[1]);
            }
        }
    });
});
</script>

</body>
</html>

However, if I remove the lines

$('#dobli').html(othli[2]); 
$('#genli').html(othli[3]);

$('#mobli').html(othli[1]); 
$('#genli').html(othli[3]);

and

$('#dobli').html(othli[2]); 
$('#mobli').html(othli[1]);

from my code, the script works fine but the desired result is not achieved(update the buttons using html property).

Any other alternatives to this? And why is the above code not working?

My fiddle:

JSFIDDLE

Replace `$('#det_cont .lispan_4').on('click',function() {` with `$('.lispan_4', '#det_cont').on('click',function() {` — Alon Eitan, Dec 16 '16 at 22:24
Can you define "doesn't work"? What are you trying to accomplish here? Reading through your code trying to decipher your intent isn't fun. To be honest just glancing at the code it's kind of a mess, there is likely a better way to accomplish this without all the if statements. — Rick Calder, Dec 16 '16 at 22:28
Sorry the question was closed, I was just about to answer... I think your call to `.on(...)` is incorrect. If I understand you correctly, the problem is that after you click one of the "Add" buttons once, none of the other "Add" buttons work. This is because, by calling .html() you are creating new DOM elements. Now, the point of `.on` is to be able to catch events for DOM elements that didn't exist when the page was created, but I think you need to tweak the call like so: `$('#det_cont').on('click','.lispan_4',function() {` — Joseph, Dec 16 '16 at 22:29
"doesn't work" means "update the buttons using jquery html property". If there is a better way, please do provide one as m a newbie to this stuff. Thanks. :) — D. Rath, Dec 16 '16 at 22:32
.html() in this case will return the html of that element Joseph, try opening his fiddle and adding alert(othli[3]) right before the on click event. It will alert the html contents of the correct span. — Rick Calder, Dec 16 '16 at 22:33
To point you to your problem, as @Joseph has mentioned you are changing your DOM in these lines: `$('#dobli').html(othli[2]);`, `$('#genli').html(othli[3]);` and so on. Aside from the weird logic of your code, when you change DOM, you have to bind your events again to the newly created elements... — EhsanT, Dec 16 '16 at 22:33
Change the on click to this: $(document).on('click','#det_cont .lispan_4',function() { The problem is those buttons are created dynamically, so they aren't there on document ready, you have to bind them on creation — Rick Calder, Dec 16 '16 at 22:35

$('#id').html(var) not working

0 Answers0